时间戳

首页 > 解决方案 > jquery在单击时将所有图标添加到列表分隔符

javascript - jquery在单击时将所有图标添加到列表分隔符

问题描述

我有一个使用 jquery 的 phonegap 应用程序，它围绕 listview 构建，并使用一些自定义 js 根据用户输入打开和关闭特定的列表分隔符。

它对所有只有文本的列表分隔符做了我想要的一切，但是当我需要包含图像时它会出错。首次打开时它看起来不错，但是一旦您单击以展开分隔线 - 从那时起，它会在图像上方添加一行我认为是白色的 jquery 图标（X、>、<、向上箭头、向下-箭头、刻度、齿轮、刷新符号）。

当我在 Firefox 中打开应用程序时，一切正常。但是如果我在模拟手机的 Firefox 开发者工具中打开它，问题就在那里。一旦应用程序实际在手机上，它就在那里。

问题的例子

这是html

<ul data-role="listview" class="library" data-icon="false" data-inset="true" data-divider-theme="c">


<li data-role="list-divider" data-link="coffee" class="fontbrush"><div> Custom Tokens<img src="img/sample image.jpg"> </div></li>
<li class="lazy hidden coffee"><a></a>
<p><img data-src="img/luxury card.jpg">

这就是我认为可能是相关的JS

 // hide and show on search
$(function(){
  $('[data-role="list-divider"]').toggle(function(){
    $('.'+$(this).attr('data-link')).addClass('show');
    $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
$(".lazy.show").each(function(idx){    
var $img = $(this).find("img");
var src = $img.data("src");
$img.prop("src", src);
$(this).removeClass('lazy');
});

  },function(){
    $('.'+$(this).attr('data-link')).removeClass('show');
    $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
  });
});

只有文字没有问题。只有当图像存在时。

有任何想法吗？

编辑：每次出现图像时都会出现问题，而不仅仅是有文字时

标签： javascriptjqueryphonegap

解决方案

我找到了解决方法，尽管我仍然不确定问题出在哪里。

我最初采用和改编的代码使用了很多 .removeClass('ui-icon-plus') 和 .addClass('ui-icon-minus') 来触发列表分隔符及其子项的更改。我将它们更改为一对不引用图标的唯一类名。它解决了这个问题。不知道为什么。但它做到了！

推荐阅读