jQuery Mobile - 单击时更改翻转开关

Posted 2023-05-09

【中文标题】jQuery Mobile - 单击时更改翻转开关

【英文标题】：jQuery Mobile - changing the flipswitch on click

【发布时间】：2014-04-22 18:56:47

【问题描述】：

我有一个禁用的翻转开关。单击翻转开关时，会出现一个弹出窗口，询问用户是否确定要更改翻转开关。如果他们点击是，那么他们将不得不重新回答几个问题。我希望能够更改翻转开关，回答问题，然后返回并再次更改翻转开关，重新回答问题......等等。由于某种原因，当我单击翻转开关时，它在第一次单击时工作，但第二次单击它会改变它从是到否（或相反）然后返回。它几乎就像它记录了它被点击了多少次一样。

Here is a fiddle to show the issue

这是我的代码：

$("#US_toggle").click(function() //flipswitch is clicked
  $('#US_Popup').popup('open'); //popup is opened
  $('#US_changeYes').click(function()
    if($("#US_toggle .ui-flipswitch").hasClass('ui-flipswitch-active'))                
      $("#US_toggle .ui-flipswitch").removeClass('ui-flipswitch-active');
    else
      $("#US_toggle .ui-flipswitch").addClass('ui-flipswitch-active');
    ;
  );
);

这里是html：

<div id="US_toggle" class="floatRight">             
    <select name="US_flipswitch" id="US_flipswitch" data-role="flipswitch" data-theme="c" disabled="disabled">
      <option value="off">No</option>
      <option value="on">Yes</option>
    </select>               
</div>

【问题讨论】：

只是一个建议。它不会解决您的问题，但会简化您的代码。你可以使用$("#US_toggle .ui-flipswitch").toggleClass('ui-flipswitch-active')而不是整个hasClass if statment

您能否向我们展示您的 HTML 标记，或者更好地创建一个重现问题的小提琴？

@NevilleNazerane 我尝试了你的建议，不幸的是它没有删除或添加课程。

@ezanker 我添加了 HTML。我会试着把小提琴放在一起。

@ezanker - fiddle created

【参考方案1】：

问题是每次启动弹出窗口时，您都将点击代码添加到 changeYes 按钮。您应该只在 div 点击之外添加一次：

更新FIDDLE

$("#US_toggle").click(function () 
    $('#US_Popup').popup('open');

);

$('#US_changeYes').click(function () 
    if ($("#US_toggle .ui-flipswitch").hasClass('ui-flipswitch-active')) 
        $("#US_toggle .ui-flipswitch").removeClass('ui-flipswitch-active');
     else 
        $("#US_toggle .ui-flipswitch").addClass('ui-flipswitch-active');
    ;
);

更新：与其切换类，不如切换选择值然后刷新翻转开关：

$('#US_changeYes').click(function () 
    var curVal = $("#US_flipswitch").val();
    curVal == "off" ? $("#US_flipswitch").val("on").flipswitch("refresh") : $("#US_flipswitch").val("off").flipswitch("refresh");
);

新FIDDLE

【讨论】：

效果很好！非常感谢您解决了我的问题！

不客气。请查看我的更新答案，我认为切换选择值而不是切换类更好的代码...