Question

我使用最新版本的jQueryMobile（1.3.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，无论复选框的状态如何那么如何设置正确的链接？

Answer 1

<a>上的ID为#link1，link1应为{{1}}。

Answer 2

试试这个

 function myFunction()
{
    if ($('#checkbox2').is(':checked')) 
        $("#link1").attr("href", "#popup2"); 
    else 
        $("#link1").attr("href", "#popup1");     
}

Answer 3

试试这个：

FIDDLE DEMO

我已经更新了你的代码有点改变你的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);
});

复选框更新后，“href”属性未正确更新

3 个答案: