Question

我正在尝试使用下面的代码替换另一个div onclick。它适用于一个实例。但是，问题是当类出现不止一次时（对于我而言）（多个实例），它显然会更改所有实例，因为它们具有相同的类名。有没有办法让它只更改点击的实例？感谢

HTML

<div id="test"></div>

JavaScript（动态创建HTML）

var html =
 '<form action="test.php" method="get" class="myForm">' +
   '<input type="hidden" name="mID" value="' + this.id + '"/>' +
   '<input type="image" class="send" src="this.image" name ="send" alt="submit"/>' +
 '</form>';

$('div#test').append(html);


$("#test").on('click', '.send', function(e) {
e.preventDefault();

   var $form = $(this).closest('form');

   $.get($form.attr("action"), 
   $form.find(":input").serializeArray(), 
      function(data) {

  $('.myForm').replaceWith('<div class="myForm2"><img src="Icons/PNG/tick 2.png" alt="submit"/></div></div>');

});
});

 $("#test").on('submit', '.myForm', function(e) {
  return false;
});

溶液;

而不是;

  $('.myForm').replaceWith('<div class="myForm2"><img src="Icons/PNG/tick 2.png" alt="submit"/></div></div>');

正确的方式;

  $form.replaceWith('<div class="myForm2"><img src="Icons/PNG/tick 2.png" alt="submit"/></div></div>');

Answer 1

您已经大部分时间使用$form = $(this).closest('form');，但出于某种原因，您开始使用$('.myForm')选择所有表单，所以

替换

$('.myForm').replaceWith( ...

带

$form.replaceWith( ...

Answer 2

首先，您没有替换div，而是替换表单（使用类.myForm）。由于此表单位于div中，因此当您要更改表单时，可以使用该表单：

$(this).find(".myForm").replaceWith...

Answer 3

$(".targetClass").click(function(){
  var theDivBeingClicked = $(this);
  //Do something
})

Answer 4

简单！我不是JQuery Expert，但我们采用传统方式！

var elements = document.getElementByID（'test'）我们会有elemements [0]和elements [1] ....里面有id =“test”的所有内容。但只需要替换第一个元素。

所以，我们的选择落在元素[0]上。

$（ 'myForm的'）。replaceWith（.....）

取走myForm，并添加你想要替换的元素数组编号，然后它总是在替换的文档中的这个元素。

玩得开心！

如何用另一个Div替换Div但只有一次

4 个答案: