Question

我有两个是动态创建的，

<div id="flipbutton1" class="flipButton">
      <ul>
      <li><a href="javascript:ActionFunction('tcp.php',0);">OFF</a></li>
      <li class="on"><a href="javascript:ActionFunction('tcp.php',1);">ON</a></li>
      </ul>
</div>

也是这个

<div id="flipbutton2" class="flipButton">
      <ul>
      <li><a href="javascript:ActionFunction('tcp.php',0);">OFF</a></li>
      <li class="on"><a href="javascript:ActionFunction('tcp.php',1);">ON</a></li>
      </ul>
</div>

现在我想使用相同的JavaScript函数但是在不同的id上。例如：

<script>
$(document).ready(function(){
  $("#flipbutton1 ul li").click(function(){
        $("#flipbutton1 ul li").removeClass("on");
        $(this).addClass("on"); 
    });
});

问题：它应该以这样的方式工作，当我点击flipbutton1它应该以相同的方式工作，但当我点击flipbutton2它应该#shutbutton1到＃flipbutton2。任何帮助将不胜感激。

此致

Answer 1

编辑版： $(document).ready(function(){ $(".flipbutton ul li").click(function(){ $(".flipbutton ul li.on").removeClass("on").addClass("off"); $(this).removeClass("off").addClass("on"); }); });

即使你添加了更多的翻转按钮，只要他们使用.flip按钮类，这应该可以工作。

Answer 2

这将有效

$(document).ready(function(){
  $(".flipButton ul li").click(function(){
        $(this).toggleClass("on")
    });
});

Answer 3

您是否只想要<li>中的一个？

$(".flipButton ul li").click(function () {
    $(this).siblings().andSelf().toggleClass("on");
});

两个不同按钮的相同JavaScript函数（I / O按钮）

3 个答案: