使用 jquery 选择器捕获 div答案

【问题标题】：capturing a div with jquery selector使用 jquery 选择器捕获 div
【发布时间】：2015-04-29 19:39:13
【问题描述】：

我被难住了。我有一个从 mysql 查询结果动态填充的表单。根据返回的行数，该过程将为每一行添加一个 div，并用问卷填充每个 div。最初每个 div 都是隐藏的，并且对于每个 div 有一个切换按钮，以及 mysql 表中该记录的内容的描述。

每个div都被动态分配一个id，比如“ACH”加上mysql查询返回的记录的索引号。在示例中我现在正在使用，有两个 div，一个是“ACH925”，另一个是“ACH926”，这在调试器中很明显。

问题是第一个 div 的切换按钮同时切换。 div2的切换按钮没问题；它只会切换 div2。此外，div1 的切换按钮对 div2 具有可逆影响。如果两个 div 的可见性模式不同，则 div1 如果 div1 设置为显示，切换按钮会将 div2 设置为隐藏，或者在 div1 隐藏时显示。

我希望每个 div 都是独立的，并显示或隐藏一个或两个。

一些用php字符串编写的html代码，其中$value是查询返回的索引号：

$(document).ready(function() {
    var rows=1;
    for (i=0; i<=rows-1; i++) {
        var table = document.getElementById("ACHTable'.$value.'");
        var row   = table.insertRow(-1);
        var cell  = row.insertCell(-1);
        cell.width = "12%";
        cell.innerHTML = "<button id=\"shwBtn'.$value.'\" class=\"showBtn\" type=\"button\">Show / Hide</button>";

        cell = row.insertCell(-1);
        cell.width = "88%";
        cell.style.fontSize="14px";
        cell.innerHTML = "DisputeID: '.$value.';&nbsp;&nbsp;Dispute Date: '.$dd[$ctr].';&nbsp;&nbsp;Merchant: '.$mer[$ctr].'";
        cell.innerHTML+= ";&nbsp&nbsp;Transaction Amount: $'.money_format('%i', ($amt[$ctr]/100)).'";
    }
});

以及执行切换的以下代码：

$(document).ready(function () {
    var container = $("#ACH'.$value.'");
    console.log(container.prop("id"));
    $(".showBtn").click(function () {
        container.toggle();
    });
});

最后是控制台，其中的 div 非常明显：

有什么想法吗？

【问题讨论】：

cell.innerHTML+='... 不要这样做。将innerHTML 视为一种“方法”，而不是“属性”（尽管它在技术上是一种属性）。它获取您提供给它的 HTML，并将其转换为等效的文档对象。您可以轻松地将多行字符串连接在一起并一次分配一次 innerHTML。
感谢 Katana314。好点子。我没有想到这一点 - 显然我只是想减少一个长字符串以使其无需滚动即可阅读。

标签： javascript php jquery html

【解决方案1】：

您正在添加此处理程序：

$(".showBtn").click(function () {
    container.toggle();
});

所有现有元素的类声明为showBtn。所以最后任何按钮都会切换所有container div。

你可能想这样做：

$("#shwBtn'.$value.'").click(function () {
    container.toggle();
});

但那很丑陋。最好在按钮的onclick 中正确设置它。

目前最简单的方法是使用$.data() 方法，通过添加到data-toggle="#ACH'.$value.'" 的每个按钮属性，然后一次为所有按钮添加一个点击处理程序：

$(document).ready(function () {
    $(".showBtn").click(function () {
        $($(this).data("toggle")).toggle();
    });
});

或类似的东西。

【讨论】：

【解决方案2】：

你已经非常接近答案了。

$(".showBtn").click(function () {
    container.toggle();
});

这将转换container 的值，你可以用$(@987654321@) 代替：

$(".showBtn").click(function () {
    $(this).toggle();
});

这是触发点击的对象。

编辑：正如 yergo 指出的那样，这不会（完全）适合您的问题，但是您可以通过将 .showBtn 更改为专有类来触发此问题，并将此类分配给您的 ACH div 来轻松解决此问题

【讨论】：

【解决方案3】：

将选择范围限定为容器。这可以使用 .find() 或使用 jQuery 快捷方式来完成，您可以在第二个参数中设置范围。

$(document).ready(function () {
 var container = $("#ACH'.$value.'");
 console.log(container.prop("id"));
 $(".showBtn",container).click(function () { //<- button scoped to container
  container.toggle();
 });
});

【讨论】：