Javascript 图像旋转取决于单击了哪个div

我已使div仅在单击其标题div时显示，并在其中一个显示而其他未显示时启用切换

我的问题是添加一个图像，它会为当前单击的正确div旋转，这只是第一个div中旋转的第一个图像，没有给出它们自己的名称和ID，我想知道如何区分它们，因为我是JS的初学者

这是我的剧本：

<script>
$(document).ready(function() {                     
        $('a.box').click(function(event){
            event.preventDefault();
            var sliderContent = $(this).next('.sliderContent');
            $('.sliderContent').not(sliderContent).hide();

            var element = document.getElementById('spin');
            if (element.className === "normal") {
                element.className = "rotate";
            }
            else if ( element.className === "rotate") {
                element.className = 'normal';
            }

            sliderContent.toggle();
        });
        $('.closeButton').click(function(){
            $(this).parent().hide();
        });
    });
</script>

$（文档）.ready（函数（）{
$（'a.box'）。单击（函数（事件）{
event.preventDefault（）；
var sliderContent=$（this.next（'.sliderContent'）；
$（'.sliderContent'）.not（sliderContent.hide（）；
var元素=document.getElementById（'spin'）；
if（element.className==“正常”）{
element.className=“旋转”；
}
else if（element.className==“旋转”）{
element.className='normal'；
}
sliderContent.toggle（）；
});
$（'.closeButton'）。单击（函数（）{
$（this.parent（）.hide（）；
});
});

完整版本：

---

你就快到了。因为你有相同的身份证，我是这样做的：

不要通过

id

获取元素，它只返回具有该id的第一个元素，而是这样做

var元素=$（this.find（“img”）[0]

//目标
同侧耳1
Lorem Ipsum Doner 2
Lorem Ipsum Doner 3

哇，谢谢！如果您单击另一个div，如何使其旋转回正常状态，例如，如果我打开3，然后打开1，则图像上的这两个div都是打开的。@Beth:更新了答案以包含此更改。现在在任何给定时间点只能打开一个内容哇，太棒了！但是，如果单击两次，是否仍可以关闭打开的div，以便所有div可以同时关闭，就像您上一个示例中的div 3或我的第一个示例中的div 3一样？最后一个例子中的第三组的行为也与其他组不同吗？@Beth:很抱歉搞混了。请参阅更新的答案。它正在工作。考虑的所有用例DI都建议不要使用多个相同的

id

。您应该改用

class

。在此进一步阅读：非常感谢-这也很好，唯一的一点是，如果单击另一个div，例如，在div 1打开时单击div 3，图像不会重置为正常。这是可能的/容易的，还是我最好给每个图像提供自己的id？是的，这很容易，我建议更改您的HTML/CSS。CSS：让它成为.normal（定位）和.rotate是rotate（）。因此，如果图像同时包含两个类，它将旋转。HTML：从图像中删除ID。然后使用上面更新的代码。你能在fiddle上向我展示我需要做哪些更改才能做到这一点吗？更新后，只需删除CSS中的.normal的样式，并使用上面的JS，就可以了。还有很多代码。

$(document).ready(function() {                     
    $('a.box').click(function(event){
        event.preventDefault();
        var sliderContent = $(this).next('.sliderContent');
        $('.sliderContent').not(sliderContent).hide();

        if ( $(this).find('img').hasClass('rotate') ) {
            $(this).find('img').toggleClass('rotate');
        } else {
            $('img.rotate').removeClass('rotate');
            $(this).find('img').toggleClass('rotate');
        }

        sliderContent.toggle();
    });
    $('.closeButton').click(function(){
        $(this).parent().hide();
    });
});