Jquery Mobile ListView 선택 항목 CSS 색상

목록을 동적으로 생성합니다. onclick 이벤트를 사용하여 javascript를 호출하고이 작업을 수행 할 수 없습니다. 목록에서 선택한 항목을 다른 색상으로 가져 오는 것입니다.Jquery Mobile ListView 선택 항목 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"). (function() { alert ("here"); $ ('# mylist li'). $ (this) .removeClass ("ui-btn-active"), }), 경고 ("클래스 추가"), var p = $ (this)) .parent(); $ (p) .addClass ('ui-btn-active'); }); – user1981120

li 요소에 data-theme = 'a' 속성을 추가하고 필요한 템플릿을 선택하면됩니다. 이 속성에 대한 자세한

뭔가 : 당신은 또한 ('새로 고침') .listview을 실행해야 http://jquerymobile.com/demos/1.2.0/docs/content/content-themes.html

;을 사용하여 목록보기를 다시 작성하십시오. 여기

코드에서 예를 일하고있어 여기 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 선택 항목 CSS 색상

답변

관련 문제