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

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

您的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>";

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

2 个答案: