Question

 $('div#showme').css('display', 'none');
        $('#edit').click(function() {
          event.preventDefault();
          console.log("detected click")
          $('div#showme').toggle();
        });;

我有两个#showme表单和两个#edit按钮，我想使用Jquery一次只显示一个表单，因为它当前已编码，当单击一个#edit时，这将显示两个表单#showme。我该如何解决这个问题？

Answer 1

你已经非常接近了！你只需要重命名你的“showme”div。

ID（在div#showme中）只能在页面中使用一次。例如，您需要拨打一个showme1和另一个showme2。

当用户点击时，在showme1和showme2上进行切换 - 只要他们开始显示一个而另一个隐藏，他们就会在两个之间切换。

Answer 2

如果您的两个showme表单共享相同的ID，请三思而后行。与两个表单共享相同的ID无效。使用类来设置样式，并为表单提供2个不同的ID，这样您就可以轻松地在它们之间切换。

Answer 3

最简单的方法是

定义一个表示要切换的两个项目的类：例如displayToggle
将该类应用于这些HTML元素
将样式display: none添加到您想要最初隐藏的内容
使用jQuery toggle方法更改显示

例如

HTML

<div class='displayToggle' style="display: none">First Item</div>
<div class='displayToggle'>Second Item</div>
<button id='toggle'>Toggle</button>

JQuery的

$(document).ready(function() {
    $('#toggle').click(function() {
       $('.displayToggle').toggle();
    }); 
});

小提琴：http://jsfiddle.net/B2xgd/1/

Answer 4

ID是唯一的，请使用class，然后选择$("div.showme")和$(".edit")

如果您只想选择一个表单并进行展示，请按照我在this Demo Fiddle

中的操作进行操作

使用一个编辑按钮在两个表单之间切换

4 个答案: