Jquery Mobile ListView Seleted Item CSS顏色

我正在動態創建一個列表。我使用onclick事件來調用一個JavaScript，這是可行的，我不能做的是從列表中獲取所選項目以獲得不同的顏色。Jquery Mobile ListView Seleted Item CSS顏色

這是代碼示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title>`enter code here` 
    <script src="scripts/jquery.js" type="text/javascript"></script> 
    <link href="stylesheets/jquery.mobile.css" rel="stylesheet" type="text/css" /> 
    <script src="scripts/jquery.mobile.js" type="text/javascript"></script> 
    <script> 

     $(document).ready(function() { 
      var $al = $("#mylist"); 
      $al.append("<li ><a id='a1' href=\"#\" rel=\"external\" onclick=\"test('selected test 1'); return false\">TEST 1</a></li>"); 
      $al.append("<li ><a id='a2' href=\"#\" rel=\"external\" onclick=\"test('seleced test 2'); return false\">TEST 2</a></li>"); 
     }); 

     function test(text) { 
      $("#divtest").html(text); 
     } 

     $("#myList li a").click(function() { 
       $('#myList li > div').each(function (index) { 
        $(this).removeClass("ui-btn-active"); 
       }); 
       var p = $(this).parent(); 
       $(p).addClass('ui-btn-active'); 
      }); 

    </script> 
</head> 
<body> 
    <div data-role="page" id="profile"> 
     <div data-role="header" data-position="fixed"> 
     </div> 
     <!-- /header --> 
     <div data-role="content"> 
      <ul id="mylist" data-role="listview" data-inset="true"> 
      </ul> 
     </div> 
     <div id='divtest'> 

     </div> 
     <!--/content--> 
     <div data-role="footer" data-position="fixed"> 
     </div> 
     <!--/footer--> 
    </div> 
</body> 
</html>

來源

2013-01-15 user1981120

T要求你的幫助，我的問題是刪除CSS的一部分。我更新了未來參考的例子。 – user1981120

要做到這一點，你需要從你的列表項打電話.addClass和.removeClass。根據你想要的顏色，你將不得不刪除/添加某些類。對於初學者，您可以將類ui-btn-active添加到項目。

來源

2013-01-15 19:31:20 Miz

嗨，謝謝你的回答，你有沒有這樣做的例子，我嘗試做這樣的事情：$（「＃mylist li a」）。click（function（）{ alert（「here」）; （'＃mylist li'）。each（function（index）{ $（this）.removeClass（「ui-btn-active」）; }）; alert（「add class」）; var p = $（this）.parent（）; $（p）.addClass（'ui-btn-active'）; }）; – user1981120

您只需要添加data-theme ='a'屬性給li元素並選擇需要的模板。

一下關於這個屬性：http://jquerymobile.com/demos/1.2.0/docs/content/content-themes.html

您還需要執行.listview（ '刷新'）;重新設置一個listview。

這裏的工作示例從代碼：http://jsfiddle.net/Gajotres/z5Vhm/

而且這裏是你的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title>`enter code here` 
    <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
    <script> 

     $(document).ready(function() { 
      var $al = $("#mylist"); 
      $al.append("<li data-theme='a'><a id='a1' href=\"#\" rel=\"external\" onclick=\"test('selected test 1'); return false\">TEST 1</a></li>"); 
      $al.append("<li data-theme='b'><a id='a2' href=\"#\" rel=\"external\" onclick=\"test('seleced test 2'); return false\" >TEST 2</a></li>"); 
      $al.listview('refresh'); 
     }); 

     function test(text) { 
      $("#divtest").html(text); 
     } 

    </script> 
</head> 
<body> 
    <div data-role="page" id="profile"> 
     <div data-role="header" data-position="fixed"> 
     </div> 
     <!-- /header --> 
     <div data-role="content"> 
      <ul id="mylist" data-role="listview" data-inset="true"> 
      </ul> 
     </div> 
     <div id='divtest'> 

     </div> 
     <!--/content--> 
     <div data-role="footer" data-position="fixed"> 
     </div> 
     <!--/footer--> 
    </div> 
</body> 
</html>

來源

2013-01-15 19:38:04 Gajotres

嗨感謝您的迴應，這個例子，你發送的顏色是修復，我只想要一個，我點擊獲得不同的顏色，並不總是。你能幫助我嗎？ – user1981120

給我一段時間來解決你的例子。 – Gajotres

現在來看看。 – Gajotres

你需要找到父李對當前超鏈接和應用背景顏色父：

$('a').click(function() { 
    $(this).parent().css({'background-color' : 'red' }); 
});

檢查此jsFiddle：http://jsfiddle.net/p42SX/3/

來源

2013-01-15 19:38:33 Learner

Jquery Mobile ListView Seleted Item CSS顏色

回答

相關問題