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

【问题标题】：Can this be converted to work with multiple (20+) instances?这可以转换为与多个（20 多个）实例一起使用吗？
【发布时间】：2010-05-05 19:08:29
【问题描述】：

我将此代码用于常见问题解答。您单击 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");
});
});

【问题讨论】：

标签： jquery toggle show-hide attr

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：