使用jQuery Mobile在点击时更改data-icon

Question

这是我的代码：

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr('data-icon');
    console.log(display);
    if(display == 'minus'){
        $(toggle).attr('data-icon', 'check');
            console.log(display);
    } else {
        $(toggle).attr('data-icon', 'minus');
        removeMarkers(toggle);
    }
}   

它将在控制台记录 "minus" 并进入第一个 if() 块并正确执行 displayAllPOIOfType()，但尽管它被正确设置，它不会反映值的更改。 有什么想法，因为它显然正确读取/设置了属性。 是否需要调用更新函数？谢谢

- MJB

---

toggle是选择器，用于获取元素。它能工作，因为它正确读取了"data-icon"属性。那么为什么第二次不起作用呢？ - MJB

你确定该属性未设置吗？在 $(toggle).attr('data-icon', 'check'); 后立即记录一下日志，可以吗？ - Denys Séguret

可能是因为你正在动态创建一个新元素。你可能需要使用委托或on方法。 - Ryan

嘿，你正在记录 console.log(display)，那是无用的！记录 $(toggle).attr('data-icon')。 - Denys Séguret

你是对的，它实际上被设置了，但只是没有改变。看起来我需要找到一个更新函数或者类似的东西。 - MJB

Answer 1

这取决于它是一个按钮、选择框还是其他接受 data-icon 属性的元素。不幸的是，jQuery Mobile 对于动态更改由data-*属性控制的事物没有很好的支持，因此您需要调整属性以及修改子元素的类。对于按钮，像下面这样应该可以工作：

$(buttonSelector).attr('data-icon', newIcon);
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

- FMM

---

谢谢 - 很有用。我想在可折叠面板中切换数据分割图标，我使用了以下代码：$(this).find(".ui-icon").addClass("ui-icon-newicon").removeClass("ui-icon-oldicon")，其中 $(this) 是包含分割按钮的对象。 - Samik R

实际上，这确实会将data-icon值更改为newIcon值...但用于按钮的实际图像并不会更改。你有什么想法？ - lowcrawler

这是一个相当古老的问题，我预计 jQuery Mobile 有更高版本会比此问题涉及的版本做得更好（如果记忆无误，应该是1.0或者1.1？）。 - FMM

Answer 2

如果图标在一个按钮内，例如：

<a id="buttonID" href="#" data-role="button" data-icon="delete">Button</a>

你可以使用buttonMarkup函数更改图标：

$('#buttonID').buttonMarkup({ icon: "check" });

或者使用您自定义的图标:

$('#buttonID').buttonMarkup({ icon: "my-icon" });

例子: http://jsfiddle.net/u8fnJ/1/ 如此帖子所示如何使用jQueryMobile刷新头部的按钮？

- Lilás

---

谢谢！完美运行！ - WhatsInAName

Answer 3

http://jsfiddle.net/phillpafford/8pwFK/29/

将自定义图标更改为星形图标。

$(this).attr('data-icon','star');
$(this).find('.ui-icon').removeClass('ui-icon-custom').addClass('ui-icon-star');

这个例子很容易学习。

- christophe

---

这个问题已经一年了，解决方案已经发布、被接受，而你的答案则是完全复制了那个解决方案。 - MJB

@DatProgram 是的，你的问题可能已经解决了，但是将来其他人可能会遇到同样的问题。是的，FMM 给出了一个很好的答案，但我只是提供了一个补充。这可能对其他人有所帮助。 - christophe

可以将该链接作为对他解决方案的评论发布，无需编写与“新”答案相同的答案。 - MJB

通过@DatProgram提供的原始答案，我花了6-10分钟，但是我添加的答案可能只需要2-3分钟就能解决。 - christophe

Answer 4

对于列表视图，您需要插入一个 span。

$("#times").off('click','li').on("click","li",function() {

 /* add a checkbox when you click the listview li  */
 $(this).find('div.ui-li').append('<span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span>');

});

- Charlie Dalsass