javascript - jQuery 函数忽略增量值

Question

我似乎无法解决这个问题，大约两个小时后我放弃了。我根本不擅长 javascript。

这是一个 jfiddle，其中包含我在这里找到的一个不错的 jquery:

 [html]
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>


[javascript]
var i = 1;
$("#addProduct").click(function() {
$("<div />", { "class":"wrapper", id:"product"+i })
 .append($("<input />", { type: "text", id:"name"+i }))
 .append($("<input />", { type: "text", id:"property"+i }))
 .appendTo("#someContainer");
i++;
});

$("input").live("click", function() {
 $("span").text("Clicked ID: " + this.id);
});

它附加两个具有唯一 ID 的新输入。现在我想做的是使用 on() 在“焦点”时重置不同输入的值。问题是，我希望它清除其相应的输入，例如关注“id=name1”将重置“id=property2”，反之亦然，关注“id=name2”将重置“id=property2”，反之亦然于...

所以我添加了:

var i = 1;
   $("#addProduct").click(function() {
   $("<div />", { "class":"wrapper", id:"product"+i })
   .append($("<input />", { type: "text", class:"name"+i }))
   .append($("<input />", { type: "text", class:"property"+i }))
   .appendTo("#someContainer");

$("#product"+i).on("focus", $(".name"+i), function() {
 $(".property"+i).val("");
});

$("#product"+i).on("focus", $(".property"+i), function() {
  $(".name"+i).val("");
});

i++;

});

但无论出于何种原因，我无法重置这些输入。该函数似乎忽略了递增的值。如果我删除 var i 它似乎可以工作，但它会清除我的所有输入。从逻辑上讲，在类末尾添加“+i”应该可以解决问题，但事实并非如此。我尝试过使用不同形式的选择类:

$("#product"+i).find(".name"+i);

但这似乎也没有帮助。我真的不明白这有什么问题。如果有人可以提供帮助，我将不胜感激。

Answer 1

不要尝试对此类事情使用增量 ID。相反，使用类。通过这种方式处理动态元素要容易得多。请参阅下面的示例:

$("#addProduct").click(function() {
   $("<div />", { "class":"wrapper", class:"product"})
   .append($("<input />", { type: "text", class:"name" }))
   .append($("<input />", { type: "text", class:"property" }))
   .appendTo("#someContainer");
});

$('#someContainer').on('click', '.name, .property', function() {
  var $this = $(this);
  var $otherInput = $this.parent().find('.name, .property').not($this).val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>

<小时/>

那么，这是如何工作的呢？嗯....

首先，此处理程序监听 #someContainer 内的任何点击。元素。当听到咔嗒声时，它会检查被单击的元素是否具有 name或property类，如果存在，则调用该函数。

$('#someContainer').on('click', '.name, .property', function() {
  
});

接下来，我们缓存this作为 jQuery 对象。这是被单击的元素。

var $this = $(this);

现在我们有:

$this.parent().find('.name, .property').not($this).val('');

• $this.parent()获取被点击元素的父元素
• .find('.name, .property')查找该父项的任何具有 name 的子项或property类
• .not($this)从匹配的元素中排除单击的元素
• val('')清除所有匹配元素的值，本例中仅清除一个元素

请注意 madalin ivascu 使用 .siblings().val("");更加简洁。老实说，我忘了它，不过如果您以后有更多元素并且不想清除一些元素，这种方式会更灵活。

<小时/>

现在我们知道了更好的方法，让我们谈谈为什么您的尝试不起作用。

第一个问题是处理程序的绑定(bind)。你有:

$("#product"+i).on("focus", $(".name"+i), function() {
   //.....
});

如果你看一下docs for .on()它对第二个参数说了以下内容:

selector

Type: String

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

您正在传递一个 jQuery 对象 $(".name"+i)但这应该是一个字符串，所以只是 ".name"+i像这样:

$("#product"+i).on("focus", ".name"+i, function() {
   //.....
});

第二个问题是递增i的逻辑是有缺陷的。让我们看看为什么:

var i = 1; // here we set i to 1, cool

$("#addProduct").click(function() {
   $("<div />", { "class":"wrapper", id:"product"+i })
   .append($("<input />", { type: "text", class:"name"+i }))
   .append($("<input />", { type: "text", class:"property"+i }))
   .appendTo("#someContainer");
   
   // the 3 lines above all use i and i=1, so far so good

  $("#product" + i).on("focus", ".name" + i, function() { // for clarity, I have corrected this line, again, here i=1 so we're fine 
    $(".property" + i).val(""); // here is the issue, but we'll come back to this...
  });
 
  //..... other code....

  i++; // here we increment i so now, i=2 , seems ok, but it's not

});

所以我们现在知道问题出在嵌套处理程序上。发生的情况如下:

当我们绑定(bind)处理程序时，i立即评估并且这一行 i=1

$("#product" + i).on("focus", ".name" + i, function() { 
    //....
});

但是，处理程序内的代码在用户单击 $("#product1") 之前不会执行。 这将是在我们增加 i 之后

这意味着，当以下行运行时，i始终比添加到页面的最后一个元素高一个数字。因此，即使您修复了选择器，您也将尝试清除不存在的元素

$(".property" + i).val(""); // i here will always be the newest value for i 
                            // NOT the value of i when the handler was attached

运行下面的代码片段并观察控制台输出以了解我的意思:

var i = 1;
$("#addProduct").click(function() {
   $("<div />", { "class":"wrapper", id:"product"+i })
   .append($("<input />", { type: "text", class:"name"+i }))
   .append($("<input />", { type: "text", class:"property"+i }))
   .appendTo("#someContainer");
    
  $("#product" + i).on("focus", ".property" + i, function() {
    console.log(".property" + i);
  }); 
  $("#product" + i).on("focus", ".name" + i, function() {
    console.log(".name" + i);
  });  
  i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
<span></span>