0

jQueryMobile の最新バージョン (1.3.2) を使用しています。

タイトルと 2 つの段落を含むラベルの付いたチェックボックスがあります。タイトルをクリックして、チェックボックスの状態に応じてポップアップを表示できるようにしたい:
チェックボックスがチェックされている場合、ポップアップ 1 が画面に表示されます。
逆に、チェックボックスがチェックされていない場合、ポップアップ 2 が表示されます。

そのため、ポップアップへのリンクはチェックボックスの状態によって異なります。

これが私のコードです:

<div data-role="popup" id="popupMenu1">
    <ul data-role="listview">
        <li><a href="#">Edit</a></li>
        <li><a href="#">Activate</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>
<div data-role="popup" id="popupMenu2">
    <ul data-role="listview">
        <li><a href="#">Edit</a></li>
        <li><a href="#">Desactivate</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

<ul id="listOfObjects" data-role="listview" data-inset="true">
 <li>
  <fieldset data-role="controlgroup">
   <a id="link1" href="#popupMenu1" data-rel="popup"> Object 1</a> 
  </fieldset>
  <input type="checkbox" name="checkbox1" id="checkbox1" class="custom"/>  
 </li>

 <li>
  <fieldset data-role="controlgroup">        
   <a id="link2" href="#popupMenu1" data-rel="popup">Object 2</a>
  </fieldset>  
  <input type="checkbox" name="checkbox2" id="checkbox2" class="custom"/> 
 </li>
</ul>

<script>
 function myFunction1()
 {
  if ($('#checkbox1').is(':checked')) 
   $("#link1").attr("href", "#popup2"); 
  else 
  $("#link1").attr("href", "#popup1");         
 }

 function myFunction2()
 {
  if ($('#checkbox2').is(':checked')) 
   $("#link2").attr("href", "#popup2"); 
  else 
   $("#link2").attr("href", "#popup1");       
 }
</script>

ただし、この式では:

<a id="link1" href="#popupMenu1" data-rel="popup">Object 1</a>

また
<a id="link2" href="#popupMenu1" data-rel="popup">Object 2</a>

チェックボックスの状態に関係なく、表示されるポップアップは常に popup1 です。
では、正しいリンクを設定するにはどうすればよいでしょうか。

4

3 に答える 3

0

の id を持って<a>いる#link1はずですlink1。

于 2013-08-12T08:10:29.587 に答える
0

これを試してください：

フィドルのデモ

私はあなたのコードを少し更新して、javascript関数を変更しました:

お役に立てれば。

お知らせ下さい！

HTML:

<a id="link1" href="#">Object1</a>

<input type="checkbox" value="you selected the checkbox" id="checkbox2">check me if you like</input>

Javascript:

var test = '';
$('#link1').click(function () {    
    test = $('input:checked').length ? $('input:checked').val() : '';
    alert(test);
});
于 2013-08-12T08:20:55.807 に答える