Question

<? foreach($words as $word): ?>
<li>
    <button onClick="reply_click()">Show</button>
    <h4><?php echo $word['Word']['en_words'] ?></h4>
</li>
<? endforeach; ?>
<script>
function reply_click() {
    $("h4").toggle("slow");
}
</script>

当我点击“按钮” - 在每个foreach中显示所有内容，但必须只显示一个。我必须使用'this'这个脚本有效吗？

Answer 1

不要使用内联处理程序。

更好的方法：

$('ul').on('click', 'button', function() {
    $(this).next('h4').show();
});

Answer 2

另一种变体将此传递给函数

<button onclick="reply_click(this)">Show</button>

<script>

function reply_click(btn) {
    $(btn).next("h4").toggle("slow");
}
</script>

Answer 3

你可以试试这个：

ionic build android

NonDocumentTypeChildNode.nextElementSibling 只读属性在其中指定的元素之后返回元素 parent的子列表，如果指定的元素是最后一个，则返回null 列表中的一个。

Source

谢谢@Grundy

Answer 4

如果您使用的是jQuery，根据具体情况，您可以选择点击处理函数中的标题，如下面的解决方案之一;

$(this).next("h4");

$(this).closest("h4");

$(this).siblings("h4");

Documentation

Answer 5

使用下一个（） - https://api.jquery.com/next/

描述：获取每个元素的紧随其后的兄弟匹配元素的集合。如果提供了选择器，则检索它只有当它与那个选择器匹配时才是下一个兄弟。

<button class="toggleChild">Show</button>
<script>
$(".toggleChild").on("click", function(){
    $(this).next("h4").toggle("slow");
});
</script>

如果您想避开内联点击处理程序，可以在按钮中添加一个类并将脚本更改为此。

$scope.$apply()

javascript foreach onclick

5 个答案: