Javascript函数切换2个div并更改按钮文本-标记不同的ID

我有多组DIV，每个按钮都有，在这些组中，我有两个DIV，点击该按钮可以在它们之间切换，也可以切换按钮上的内容，但每个组和按钮都有自己的唯一ID

按钮ID由EditButton定义（它给出EditButton1、EditButton2、EditButton3等），每组中的2个div称为

EditData

和

TextData

（即

EditData1

和

TextData

）

服务器端的按钮：

<button id="EditButton<%=DataCon("ID")%>" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>

HTML中的服务器端div：

<div class="EditData<%=DataCon("ID")%>" style="display:none">
  <div class="input-group">
      <input type="text" class="form-control" placeholder="<%=DataCon("FullName")%>" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
      </div>
    </div>
  </div>
<div class="TextData<%=DataCon("ID")%>">
  <%=DataCon("FullName")%>
</div>

其结果是：

<div class="EditData1" style="display:none">
  <div class="input-group">
      <input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
      </div>
    </div>
  </div>
<div class="TextData1">
  Some Name
</div>

某个名字

上面的脚本显然不起作用，因为我没有正确地调用div和按钮，但是我如何解决这个问题呢

致意

---

Stig:-）

我认为@Rory McCrossan使用

最接近（）

的想法是可行的，唯一的问题是，如果容器上有一个包含按钮的“无显示”，那么按钮一开始就不可见

您可以稍微调整标记，使“编辑”按钮和表单都是同一父级的同级。这将允许您在vanilla JS或jQuery中使用

$（'.toggle'）。打开（'click'，函数（事件）{
$（this）.next（'.EditData'）.toggleClass（'invisible'）；
让text=$（this.parent（）.find（'.TextData'）.toggleClass（'invisible'）；
让newText=$（this.text（）=='Åben Redigering>>'？'>'；
$（this）.text（newText）；
})

奥本·雷迪吉林>>
下面应该会显示更多信息

忘记动态重复内容中的

id

属性，它们导致的问题比解决的问题多。改用公共类。然后使用DOM遍历方法将元素与单击的按钮关联起来，例如

closest（）

和

find（）

。如果你想要一个更具体的例子，请在问题中包括所有相关的HTML。现在HTML缺少

div.EditData

、

div.TextData

和

button.EditButton

元素。您好。。抱歉，MobileNumberToMove是个错误，它应该是ID。。我已经更新了我的帖子，提供了更多相关的信息和解释。。是的，我可能需要一个更具体的例子，请：-）如果页面加载时

按钮
元素被隐藏，您如何单击它来切换任何元素？不，隐藏的不是按钮，而是DIV。。我刚刚用包含的按钮更新了帖子。它做了一些应该做的事情，但是缺少了应该切换的第二个DIV。。另一个问题是，您的代码使用按钮上的类来切换按钮，这给了我一个CSS问题，因为如果我将CSS类添加到该类中，脚本将不起作用。但是，我不了解您的代码，我只看到一个按钮，它位于div内部，显示为：none applied，因此，在启用切换时，一开始它将不可见。除非我错过了什么。。同样在DIV的内部，我有多个按钮不应该影响切换，所以我们也需要记住。DIV内部的按钮不是应该影响DIV的按钮。好吧，那么你只是没有在你的问题中包括应该触发切换的按钮？另外，我不知道为什么在按钮上使用类来切换会是一个问题。您可以为css添加类，这不应该影响脚本针对正确按钮的能力。请随时更新问题中的代码，以包括应执行切换的按钮
<div class="EditData<%=DataCon("ID")%>" style="display:none">
  <div class="input-group">
      <input type="text" class="form-control" placeholder="<%=DataCon("FullName")%>" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
      </div>
    </div>
  </div>
<div class="TextData<%=DataCon("ID")%>">
  <%=DataCon("FullName")%>
</div>

<div class="EditData1" style="display:none">
  <div class="input-group">
      <input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
      </div>
    </div>
  </div>
<div class="TextData1">
  Some Name
</div>