Question

我在弹出窗口中有一个列表视图，当用户选择一个列表元素我想要更改此元素“li”背景颜色时，我已经尝试了以下代码，它正在使用jQuery mobile 1.3.2但它没有'当我将我的应用程序升级到1.4.0时，如何在用户点击它时更改列表元素的背景颜色？请帮帮我

<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content"> 
<a href="" data-rel="popup" id="Btn1" class="ui-btn  ui-corner-all" data-inline="true">Show Popup</a>

</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
    <div data-role="header" data-theme="a">

        <div style="text-align:center;float:center;padding-top:11px;">
        <font size="6px" color="white">Countries</font>

        </div>
    </div>
    <div id="scrollContent" class="content" data-role="content" style="background-color: white;">
        <ul data-role="listview" id="countrieslist" style="margin: 0 !important;">

        </ul>
      </div>
    </div>
   </div>

Java脚本代码

$('#index').on( 'pageinit',function(){


   for(var i=1;i<=50;i++)
   {

        $('#countrieslist').append('<li id="'+i+'">'+'<a href="#" style="background:transparent !important;">'+'<font>'+Country+i+'</font>' +'</a></li>');                

   }

   $('#countrieslist').listview('refresh');
 });

 $('#Btn1').on('touchstart', function(){ 

        $(this).css({background: 'white'});
        $(this).attr('href','#MyPOPUP');    
});

 $('#countrieslist').on('click','li', function() {

    $(this).css({background: 'blue'});
    selected_elem =  $(this).attr('id');
   alert('you selected' + selected_elem);
       $('#MyPOPUP').popup('close');


 });

Answer 1

你的循环中有一个创建国家的小错字，但除了代码似乎有用之外，

这是一个有效的 DEMO

因为pageinit已弃用1.4，我使用了pagecreate;并且在for循环中，字体标记之后的单词country应该在单引号内，因为它不是变量。此外，在li点击中，我在设置新选择的国家之前将所有其他国家/地区重置为透明背景：

$(document).on( 'pagecreate', '#index',function(){
   for(var i=1;i<=50;i++) {
        $('#countrieslist').append('<li id="'+i+'"><a href="#" style="background:transparent !important;"><font>Country' + i +'</font></a></li>');                
   }
   $('#countrieslist').listview('refresh');

    $('#Btn1').on('click', function(){ 
        $(this).css({background: 'white'});
        $(this).attr('href','#MyPOPUP');    
    });

    $('#countrieslist').on('click','li', function() {
        $('#countrieslist li').css({background: 'transparent'});
        $(this).css({background: 'blue'});
        selected_elem =  $(this).attr('id');
        alert('you selected' + selected_elem);
        $('#MyPOPUP').popup('close');
    });
});

在jquery mobile 1.4.0中选择listview项时，更改listview项的背景颜色

1 个答案: