使用 php 变量切换 Jquery 不起作用

Question

我有这个切换功能可以使列表项可见和不可见。 没有变量 id 它可以工作（当然只有第一个打开）。 但是对于变量，它根本不起作用。 该变量只是一个数字，添加到列表项 id 中，在 html 代码中很好地显示了这一点。 这是我拥有的功能：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#button-" . $row['id'] . "").click(function() {
$("#bands-" . $row['id'] . "").toggle();
});
</script>
<?php
echo "<a id='button-" . $row['id'] . "'>bands</a>";

echo "<li id='bands-" . $row['id'] . "' class='clearfix list-group-item' style='display: none;'></li>";
?>

（回显每一行有点难看，我知道，但它有效:-P）

Answer 1

您在 JS 端转义的字符串是错误的，其余的应该可以正常工作。 在 php 方面它是正确的，因为你在一个echo字符串中。

$("#button-<?php echo $row['id']; ?>").click(function() {
    $("#bands-<?php echo $row['id']; ?>").toggle();
});

Answer 2

您应该编写一次并使用data-id属性来查找对应的项目，而不是为每一行生成 JavaScript 代码。

您的 JavaScript 应如下所示：

$(document).on("click", ".bands-button", function() {
    $("#bands-"+$(this).data("id")).toggle();
});

在您的 PHP 代码中，您将行 id 放在data-id属性而不是id属性中：

echo "<a class='bands-button' data-id='" . $row['id'] . "'>bands</a>";
echo "<li id='bands-" . $row['id'] . "' class='clearfix list-group-item' style='display: none;'></li>";