图像旋转取决于单击的div

Question

我已经使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>

完整版本： https ： //jsfiddle.net/ks5nL55k/

Answer 1

你快到了。 由于您具有相同的ID，因此我这样做是这样的：

代替按id获取仅返回具有该id的第一个元素的id，而是这样做

var element = $(this).find("img")[0]; // target the <img> tag inside the clicked header

 $(document).ready(function() { $('a.box').click(function(event) { event.preventDefault(); $("a.box").not(this).each(function() { var sliderContent = $(this).next('.sliderContent'); var element = $(this).find("img")[0]; if (element.className === "rotate") { element.className = 'normal'; sliderContent.toggle(); } }); var sliderContent = $(this).next('.sliderContent'); $('.sliderContent').not(sliderContent).hide(); var element = $(this).find("img")[0]; if (element.className === "normal") { element.className = "rotate"; } else if (element.className === "rotate") { element.className = 'normal'; } sliderContent.toggle(); }); $('.closeButton').click(function() { $(this).parent().hide(); }); }); 

 .sliderContent { border: 5px solid #fff; background-color: #FC9; padding: 10px; min-height: 150px; display: none; margin-top: 5px; } .sliderContent a { padding: 0 !important; border: none !important; } .sliderHead { width: 100%; padding: 8px; border-bottom: 1px solid #CCC; font-size: 20px; font-family: Verdana, Geneva, sans-serif; text-transform: uppercase; color: #000; text-decoration: none; } .rotate { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .normal { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" style="text-decoration : none" class="box"> <div class="sliderHead">Question 1 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right;" id="spin" class="normal" /></div> </a> <div class="sliderContent"> Lorem Ipsum Doner 1 </div> <a href="#" style="text-decoration : none" class="box"> <div class="sliderHead">Question 2 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right;" id="spin" class="normal" /></div> </a> <div class="sliderContent"> Lorem Ipsum Doner 2 </div> <a href="#" style="text-decoration : none" class="box"> <div class="sliderHead">Question 3 <img src="https://image.ibb.co/jZcCSa/slider_Close.png" style="float:right; " id="spin" class="normal" /></div> </a> <div class="sliderContent"> Lorem Ipsum Doner 3 </div> 

更新小提琴

Answer 2

$(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();
    });
});