javascript jQuery mobile listview 更改选择项并突出显示它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15740815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile listview change select item and highlight it
提问by Gank
In a page,there is a listview,the first item is selected:
在一个页面中，有一个列表视图，第一项被选中：
var len = results.rows.length,
$list = $("#listAddr");
var $strHTML =" ";
for (var i = 0; i < len; i++) {
$strHTML += '<li ';
if (i == 0) {
$strHTML += ' data-theme="b" ';
}
$strHTML += '> <a href="#" data-ajax="false"';
$strHTML += ' data-id="' + results.rows.item(i).Id + '">' + results.rows.item(i).Name + '</a></li>';
}
$list.html($strHTML);
$list.delegate('li a', 'click',function(e){
// $("#listAddr").attr("li").removeClass("liSel");
$(this).addClass("data-theme='b'");
$("#listAddr").listview("refresh");
//$(this).removeClass("data-theme");
clickAddr($(this).data('id'));
});
When I select the third item,I want the third item to be "data-theme='b'" style and the first item to remove the theme.How to be able to do that?
当我选择第三个项目时，我希望第三个项目为“data-theme='b'”样式，第一个项目删除主题。如何才能做到这一点？
回答by Jay Mayu
You can do soemthing as below
您可以执行以下操作
$('#listAddr li').bind('click', function () {
$('#listAddr li').attr("data-theme", "c").removeClass("ui-btn-up-b").removeClass('ui-btn-hover-b').addClass("ui-btn-up-c").addClass('ui-btn-hover-c');
$(this).attr("data-theme", "b").removeClass("ui-btn-up-c").removeClass('ui-btn-hover-c').addClass("ui-btn-up-b").addClass('ui-btn-hover-b');
});
Here is an example on Live fiddle
这是一个例子 Live fiddle
回答by bipen
use data() to change the data attribute...
使用 data() 更改数据属性...
$.removeData($list.find('li'), "theme");
$(this).data("theme",'b');
try this
试试这个
$list.on('click','li a',function(e){
$.removeData($list.find('li'), "theme");
$(this).data("theme",'b');
$("#listAddr").listview("refresh");
clickAddr($(this).data('id'));
});
