Question

I want to know how to add onClass in a tag and also by using jQuery event. I try to approach by using find(). is it right like that coding? please, how to resolve this problem.

$(document).ready(function() {
  $('.tab_cont, .on').each(function(){
    var topDiv = $('.tab_cont, .on');		
    var anchors = topDiv.find('ui .screen1 a');
    var panelDivs = topDiv.find('div.area_cont, div');

    var lastAnchor;
    var lastPanel;
    lastAnchor = anchors.filter('.on');
    lastPanel = panelDivs.filter('.on');
		
    anchors.show();		

    anchors.click(function(event) {		
      event.preventDefault();
      var currentAnchor = $(this);
      currentAnchor.addClass("on");
      lastAnchor.removeClass("on");
      lastAnchor = currentAnchor;
      //lastPanel=currentAnchor;
   });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_cont on">
     <ul class="theater_zone screen1">
      <li class="area0001">
       <span class="area_zone"> 
	    <a href="javascript:void(0);" class="on">
			<h4>tab1(<em>23</em>)</h4>
			<div class="blind">select</div>
		</a></span>
	  <div class="area_cont on">
		<ul class="area_list d0001">
		 <li><a href="javascript:void(0);" class="100011013">panel1</a></li>
		 <li><a href="javascript:void(0);" class="100011018">panel1</a></li>
		 <li><a href="javascript:void(0);" class="100019010">panel1</a></li>
		 <li><a href="javascript:void(0);" class="100011004">panel1</a></li>
		 <li><a href="javascript:void(0);" class="100011009">panel1</a></li>
		</ul>
	  </div>
    </li>
	<li class="area0002"><span class="area_zone">
     <a href="javascript:void(0);" class="">
           <h4>tab2(<em>40</em>)</h4>
     </a></span>
	  <div class="area_cont">
	   <ul class="area_list d0002">
		<li><a href="javascript:void(0);" class="100023015">panel2</a></li>
		<li><a href="javascript:void(0);" class="100023030">panel2</a></li>
		<li><a href="javascript:void(0);" class="100023027">panel2</a></li>
	   </ul>
	  </div>
     </li>
    </ul>
    </div>

it doesn't work. I try to approach by using find(). is it right like that coding?.. please, how to resolve this problem.

Answer 1

首先，我会简化您的选择器并使click事件独立于其他处理程序。

$("a").on("click", function(event) {
  event.preventDefault();

  $("a").removeClass("on");
  $(this).addClass("on");

});

您可以在添加新类之前删除这些类以简化代码。当你可以清除它们时，无需使用find（）遍历整个dom。

如果您可以提供更多解释，除了添加课程之外您还要做什么，我可以提供更多帮助。

片段

＆＃13;

$(document).ready(function() {

  $("span.area_zone a").on("click", function(event) {
    event.preventDefault();

    //remove tab css
    $("span.area_zone a").removeClass("on");
    $(this).addClass("on");
    $(this).parent().parent().find('div.area_cont').addClass("on");

  });

  $(".area_list a").on("click", function(event) {
    event.preventDefault();

    //remove panel css
    $(".area_list a").removeClass("on");
    $(this).addClass("on");
    
    //update the tab
    $("span.area_zone a").removeClass("on");
    $(this).parent().parent().parent().parent().find('span.area_zone a').addClass("on");
  });

});

＆＃13;

span.area_zone a.on { color:red;}
.area_list a.on { color:green;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tab_cont on">
  <ul class="theater_zone screen1">
    <li class="area0001">
      <span class="area_zone"> 
    <a href="javascript:void(0);" class="on">
        <h4>tab1(<em>23</em>)</h4>
        <div class="blind">select</div>
    </a></span>
      <div class="area_cont on">
        <ul class="area_list d0001">
          <li><a href="javascript:void(0);" class="100011013">panel1</a></li>
          <li><a href="javascript:void(0);" class="100011018">panel1</a></li>
          <li><a href="javascript:void(0);" class="100019010">panel1</a></li>
          <li><a href="javascript:void(0);" class="100011004">panel1</a></li>
          <li><a href="javascript:void(0);" class="100011009">panel1</a></li>
        </ul>
      </div>
    </li>
    <li class="area0002"><span class="area_zone">
 <a href="javascript:void(0);" class="">
       <h4>tab2(<em>40</em>)</h4>
 </a></span>
      <div class="area_cont">
        <ul class="area_list d0002">
          <li><a href="javascript:void(0);" class="100023015">panel2</a></li>
          <li><a href="javascript:void(0);" class="100023030">panel2</a></li>
          <li><a href="javascript:void(0);" class="100023027">panel2</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

我不确定你要在这里完成什么，我认为有一个更清洁的解决方案，你想要做什么，但我想尝试帮助你。

以下是对JavaScript的一些细微修改，可能有所帮助。

$(document).ready(function() {
    $('.tab_cont.on').each(function() {
        var topDiv = $(this);
        var anchors = topDiv.find('.area_zone > a');
        anchors.show();
        anchors.click(function(event) {
            event.preventDefault();
            var currentAnchor = $(this);
            if(currentAnchor.is('.on')) {
                topDiv.find('.area_zone > a:not(.on)').addClass('on');
                currentAnchor.removeClass('on');
            } else {
                topDiv.find('.area_zone > a.on').removeClass('on');
                currentAnchor.addClass('on');
            }
        });
    });
});

如果您也喜欢，我还为您创建了JSFiddle page。

如何处理<a href="" class=""> by using find() in jQuery

2 个答案: