javascript - jQuery mobile listview change select item and highlight it - Stack Overflow

admin管理员组

文章数量:1400035

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?

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?

• javascript
• jquery
• css
• html
• jquery-mobile

Share Improve this question Follow edited Apr 1, 2013 at 9:28 Gank asked Apr 1, 2013 at 9:24 GankGank 4,67744 gold badges5151 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

use data() to change the data attribute...

$.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'));
            });

本文标签： javascriptjQuery mobile listview change select item and highlight itStack Overflow