Question

我有一个JS / jQuery脚本，可以在for循环中将我们的潜在客户（Web联系人）添加到DOM中。除了一件事，一切都很好。我希望在初始显示时隐藏主体的主体，然后使用slideToggle按钮显示或隐藏详细信息这意味着在创建每个按钮时动态添加单击事件。引导和slideToggle按钮的整个HTML（HTML和混合到HTML中的JSON对象）都附加到for循环中DOM中的节点。以下是for循环的相关部分：

// Hide the body of the lead; just show the title bar and the first line
var dataID = data[i].id
var div = $('#row' + dataID);
var more = $('#more' + dataID);

div.hide();

// Create click event for each "+" button
more.click(function() {
     div.slideToggle();
});

但是当我点击“+”按钮显示细节时，它会打开最后一个div，而不是我想要打开的div。无论我在页面上有多少线索，都是如此。如何让click事件打开正确的div。如果我在click事件中调用console.log“div”，它会给我最后一个div的ID，而不是我点击的那个。但是，如果我在click事件之外的console.log（div），它具有正确的ID。

另外，我不确定我是否需要循环中的“变量”，或者我是否应该在循环之外声明它们。

这是HTML。这是一个领先加上下一个领先的开始，我在Firebug中关闭了

<div id="lead1115">
<div id="learnmore">
<a id="more1115" class="more" href="#">+</a>
</div>
<div id="lead-info">
<div id="leadID">Lead ID# Date: March 27, 2012 11:26 AM (Arizona time)</div>
<div id="company">No company given</div>
<div id="name">Meaghan Dee</div>
<div id="email">
<a href="mailto:meaghan.dee@gmail.com">meaghan.dee@gmail.com</a>
</div>
<br class="clearall">
<div>
<div id="row1115" style="display: none;">
<div id="phone">No phone given</div>
<div id="source">www.ulsinc.com/misc/expert-contact/</div>
<div id="cp-name">No channel partner chosen</div>
<br class="clearall">
<div id="location">
No location given
<br>
<strong>IP Address:</strong>
198.82.10.87
<br>
<span>Approximate Location: Blacksburg, Virginia, United States</span>
<br>
</div>
<div id="details">
<strong>Questions/Comments</strong>
<br>
We have the Professional Series Universal Laser Systems (laser cutter), and I wondered how I would order a high power density 2.0 replacement lens.nnThank you
</div>
</div>
</div>
</div>
<div id="learnmore">
<a id="1115|send_message" class="verify" href="#">Verify</a>
<a id="1115|send_message" class="markAsSpam" href="#">Spam</a>
<a id="1115|send_message" class="markAsDuplicate" href="#">Duplicate</a>
</div>
</div>
<br class="clearall">
<div id="lead1116">
<br class="clearall">

Answer 1

我认为您的基本问题是div作为所有项目的变量很常见。您必须通过创建本地函数并为每个项目调用div来将div彼此分开。类似的东西：

function buildMore(div) {
    more.click(function() {
        div.slideToggle();
    });
}

并在循环调用中：

addMore(div);

<强> P.S。无论是在循环内部还是外部声明变量都没关系：你仍然得到相同的变量。

Answer 2

变量div不会与您的点击处理程序保持冻结，因此它的值将是for循环结束时的值，并且所有点击处理程序将使用相同的值（这就是您所看到的）。 / p>

有许多不同的方法可以解决这个问题，我认为所有这些方法都具有教育意义。他们中的任何一个都应该工作。

创意＃1 - 从点击更多内容

制作行ID

使用单击链接上的id值来制作匹配的行ID。由于您是成对创建的，因此可以通过以下方式以编程方式完成：

// Hide the body of the lead; just show the title bar and the first line
var dataID = data[i].id
$('#row' + dataID).hide();
$('#more' + dataID).click(function() {
     // manufacture the row ID value from the clicked on id
     var id = this.id.replace("more", "#row");
     $(id).slideToggle();
});

想法＃2 - 使用函数闭包来“冻结”您想要的值

另一种方法是创建一个函数和闭包，它将捕获div的当前值：

// Hide the body of the lead; just show the title bar and the first line
var dataID = data[i].id
var div = $('#row' + dataID).hide();
var more = $('#more' + dataID);

function addClick(moreItem, divItem) {
    // Create click event for each "+" button
    moreItem.click(function() {
         divItem.slideToggle();
    });
}

addClick(more, div);

想法＃3 - 使用HTML空间关系查找与更多

想法＃4 - 将行ID作为数据放在更多链接

上

// Hide the body of the lead; just show the title bar and the first line
var dataID = data[i].id
$('#row' + dataID).hide();
$('#more' + dataID).data("row", "#row" + dataID).click(function() {
     // get the corresponding row from the data on the clicked link
     var rowID = $(this).data("row");
     $(rowID).slideToggle();
});

Answer 3

这是因为div变量被改变并且以循环中设置的最后一个值结算。试试这个：

...
funciton createClick(div) {
 return function() { div.slidToggle();
}
more.click( createClick(div) );
...

Answer 4

尝试使用.bind（或.on代表1.7+）和数据参数。

more.bind("click",{target:div},function(e){
    e.data.target.show();
}

或

more.on("click",{target:div},function(e){
    e.data.target.show();
}

jQuery：如何动态地为按钮分配正确的ID

4 个答案:

创意＃1 - 从点击更多内容

想法＃2 - 使用函数闭包来“冻结”您想要的值

想法＃3 - 使用HTML空间关系查找与更多

想法＃4 - 将行ID作为数据放在更多链接