Question

我已经制作了div，只有在点击时才会显示div标题，当显示其他人不是。

我的问题是添加一个图像，该图像针对正确的div进行旋转，该图像仅在第一个div旋转的第一个图像中被点击，而不会给出他们自己的所有名称＆amp; ids，我想知道如何区分它们，因为我是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的第一个元素的元素，而是执行此操作

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>

Updated Fiddle

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

图片旋转取决于点击了哪个div

2 个答案: