jquery - 这可以转换为与多个（20 多个）实例一起使用吗？

Question

我正在使用此代码进行常见问题解答。您单击 img 会打开该框，单击该 img 也会关闭该框。img 在每次点击时切换。到目前为止，我还无法将其转换为与 1 个以上的部分一起使用。我对 jquery 或 javascript 一无所知，但了解一些编程概念。我已经尝试了4个小时没有运气。我需要你的帮助！

$(document).ready(function() {
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like
$('#box').show('slow');
$('#imgArrows').attr("src","images/up.png");
}, function() { // same here
$('#box').hide('slow');
$('#imgArrows').attr("src","images/down.png");
});
});

Answer 1

将所有 Id 更改为类后，您可能想要这样的东西：

$(document).ready(function() {
    $('.expandcontract').toggle(
        function() {
            $('.box',this).show('slow');
            $('.imgArrows',this).attr("src","images/up.png");
        }, function() {
            $('.box',this).hide('slow');
            $('.imgArrows',this).attr("src","images/down.png");
        }
    );
});

假设您的 HTML 类似于：

<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>

Answer 2

ID 应该只提供给一个元素。您需要分配元素类，然后使用适当的类检索所有元素并向它们添加切换处理程序。