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

Toggle between two forms with one edit button

本文关键字：表单 两个 之间 编辑按 一个 编辑 按钮      更新时间：2023-09-26
 $('div#showme').css('display', 'none');
        $('#edit').click(function() {
          event.preventDefault();
          console.log("detected click")
          $('div#showme').toggle();
        });;

我有两个#showme表单和两个#edit按钮，我想使用Jquery一次只显示一个表单，因为它目前是编码的，这将显示两个表单#showme，当一个#edit被点击。

你已经很接近了!你只需要重命名你的showmediv。

一个ID(如div#showme)只能在一个页面中使用一次。例如，你需要称一个为showme1，另一个为showme2。

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

id是唯一的，使用class代替，并与$("div.showme")和$(".edit")一起选择

如果您想只选择一个表单并显示它，请按照我在演示中所做的操作

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

最简单的方法是

  • 定义一个类来表示你想要切换的两个项目:输入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/

相关文章：