Question

简单的问题。我试图瞄准＆＃39; i＆＃39;使用树中的panel-indicator类标记。此外，我需要删除隐藏＆＃39;小组编辑＆＃39; i＆＃39;标签。这是HTML：

<div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingOne"> 
          <i class="panel-indicator glyphicon glyphicon-chevron-down pull-right"></i>
          <i class="panel-edit glyphicon glyphicon-pencil pull-right hide"></i>
          <h4 class="panel-title" id="-collapsible-group-item-#1-">
               <a data-toggle="collapse" data-parent="#collapseOne" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">System Details</a>
               <a class="anchorjs-link" href="#-collapsible-group-item-#1-"><span class="anchorjs-icon"></span></a>
          </h4>
     </div>
</div>

这是脚本代码。虽然它有效，但似乎是一种让它发挥作用的草率方式。所以我只是想知道如何正确地编写它，以便它设置'旋转＆＃39;上课到了＆＃39; i＆＃39;使用面板指示器类标记。

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).parent().prev('i.panel-indicator').addClass('rotate');
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
        $(this).parent().prev().prev('i.panel-indicator').removeClass('rotate');
    }
});

Answer 1

请尝试'.closest'：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.hilight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
$( document ).on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
 
</body>
</html>

来源：https://api.jquery.com/closest/

编辑：在您的情况下：

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).closest('i.panel-indicator').addClass('rotate');  //edited line
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
        $(this).closest('i.panel-indicator').removeClass('rotate');  // edited line
    }
});

Answer 2

$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
    $(this).addClass("open");
   $(this).closest('.panel-heading').find('i.panel-indicator').addClass('rotate'); 
   $(this).closest('.panel-heading').find('i.panel-edit').removeClass('hide'); 
} else if (
    $(this).hasClass("open")) {
       $(this).removeClass('open');  
       $(this).closest('.panel-heading').find('i.panel-indicator').removeClass('rotate');
       $(this).closest('.panel-heading').find('i.panel-edit').addClass('hide');  
    }
});

jQuery Tree Up Traversal

2 个答案: