Select 个元素并切换 class 以独立旋转 child 个元素

Question

我觉得我很接近，但我现在似乎陷入了僵局。我是 js/jquery n00b，所以我可能离题太远了，只是不知道而已。

我已经得到 parent div 的 child，我点击旋转（切换 .rotated class），然后当 different parent div 被点击时， .rotated class 再次切换并且 child div 旋转并从之前单击的 parent div 的 child 中删除 .rotated class。

我似乎无法弄清楚的是，如果单击 parent，如何切换 child div 的 .rotated class 连续两次。如果此描述令人困惑，请参阅底部的 Fiddle。

我知道为什么 它不起作用（我的 if 语句是 true 当我点击一个已经旋转的 div 时，并且它里面的代码在自相矛盾），我只是不太明白如何让它做我想做的事。

HTML示例（最终产品会有多个这样的div）

<div class="one-fourth">
  <div class="collapse-container">Collapser 1
    <div class="plus-logo" id="logo_1">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 144 144" xml:space="preserve">
        <path d="M2 72.2c0-38.6 31.4-70 70-70 38.6 0 70 31.4 70 70 0 38.7-31.4 70-70 70C33.4 142.2 2 110.9 2 72.2z" fill="#244385" />
        <path d="M59.1 84.5H23.8V58h35.3V22.7h26.5V58h35.3v26.4H85.6v35.3H59.1V84.5z" fill="#FFF" />
        <polygon points="72 7.2 79.1 19.5 64.9 19.5 " fill="#F6D432" />
      </svg>
    </div>
  </div>
</div>

CSS

.one-fourth {
  width: 22%;
  margin: 1%;
  float: left;
  text-align: center;
  background: lightgreen;
  box-sizing: border-box;
  padding: 2%;
  cursor: pointer;
}

.plus-logo {
  width: 32%;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: 10px auto;

}

.plus-logo svg {
  vertical-align: middle;
}

.rotated {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

JS

$('.collapse-container').click(function() {

  var rotated_logo = $('.collapse-container').find('.rotated').attr('id');  

  if (typeof rotated_logo !== 'undefined') {

    $('#'+rotated_logo).removeClass('rotated');
    $(this).children().toggleClass('rotated');

    } else {
    $(this).children().toggleClass('rotated');
  }

});

Fiddle

https://jsfiddle.net/brentfincham/fzejx81u/16/

Answer 1

这就是您要实现的目标吗？

https://jsfiddle.net/tkfg05ta/

// store for the last rotated html element
var lastRotated;

// Define the listener on the body element instead of having
//a few listeners for each .collapse-container 
$('body').on('click','.collapse-container', function(e){

  // Get the '.plus-logo' child of the currently clicked element
  var plusLogoNode = $('.plus-logo',this);


  plusLogoNode.toggleClass('rotated');

  // $('selector')[0] - gets the first element from the jquery collection 
  // as pure html node
  // If there is last rotated element and that element is not
  // the currently clicked than remove the class of lastRotated
  (lastRotated && !lastRotated[0].isSameNode(plusLogoNode[0])) && (lastRotated.removeClass('rotated'));

  // Now the last rotated is the current
  lastRotated = plusLogoNode;
});

Select 个元素并切换 class 以独立旋转 child 个元素

Select element and toggle class to rotate child elements independently

html

javascript

css

jquery

rotation