Question

当我点击任何类别时，它会将类添加为＆＃34;活动＆＃34;，但是当我点击其他类别时，它会刷新类别并删除类。如何解决这个问题？

以下是HTML代码，

<div class="flDropDiv category_fl">
                            <div class="flItems"><a class="category_filter" data-value="Fitted bed Sheet " href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Flat bed sheet " href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Full bed sheets  " href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets   </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Twin bed sheet " href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Twinxl bed sheets  " href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets   </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Queen bed sheet " href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="King bed sheets " href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Cal king bed sheets " href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Duvet covers " href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Bed skirts " href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Standard Pillow cases " href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="King Pillow cases " href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases  </a> </div>
                            <div class="flItems"><a class="category_filter" data-value="Pillow shells " href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells  </a> </div>
                        </div>

Jquery Code，

    var localStorageIndex = "clickedLink";
$(function() {
  $(".category_filter").click(function(e) {
    if($(e.target).hasClass("active")){
    return;
    }
    var clickedLink = getActiveLinkFromLocalStorage();
    if(clickedLink !== e.target.href){
      clickedLink = e.target.href;
      $(e.target).addClass("active");
      localStorage.setItem(localStorageIndex, clickedLink);
    }
  })

  function getActiveLinkFromLocalStorage() {
    return localStorage.getItem(localStorageIndex);
  }

  function initActiveLink(){
    var clickedLink = getActiveLinkFromLocalStorage();
    if(!clickedLink){
      return;
    }
      localStorage.clear();
      $("a[href='" + clickedLink + "'].category_filter").addClass("active");
  }
  initActiveLink();
});

Answer 1

请检查以下代码。希望这会对你有所帮助。

＆＃13;

$(document).ready(function(){       
   $(".category_filter li a").each(function() {
       $(this).click(function() {
           $(".category_filter li a").removeClass("active");
           $(this).addClass("active");
      });
}); 
});

＆＃13;

.active{color:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="categories-filters">
<ul class="category_filter">
<li><a href="#">Filter 1 </a></li>
<li><a href="#">Filter 2 </a></li>
<li><a href="#">Filter 3 </a></li>
<li><a href="#">Filter 4 </a></li>
</ul>
</div>

＆＃13;

Answer 2

它令人耳目一新，因为u字段href与url。如果你需要url链接ucan use属性来帮助你知道标签上的uri。这是一个在类＆＃34; category_filter＆＃34;

上添加类hactive的简单示例

＆＃13;

 $(document).ready(function () {
 		$(document).on("click",".category_filter", function(){
	    /* to remove class, uncomment this if you want to remove class $(".category_filter").removeClass("hactive");*/

			//if you want to get the uri data u can use;
			var uriData = $(this).attr("data-uriex");
			$(this).addClass("hactive");

			//sample view the single uri when click.
			$("#justClick").html("<b>uri data click :</b> "+uriData);

			//sample for get all uri on hactive class;
			var cekData = "", i =0;
			$(".hactive").each(function(){
			  cekData = cekData+"data URI Active: "+(i+1)+" "+$(this).attr("data-uriex")+"<br/>";i++;
			});
			$("#AllUri").html(cekData);
		});
	});

＆＃13;

	.hactive{
		color : #f00;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="flDropDiv category_fl">
	<div class="flItems">
		<a class="category_filter" data-value="Fitted bed Sheet " href="#" 
			data-uriex="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> 	
			Fitted bed Sheet  
		</a> 
	</div>
	<div class="flItems">
		<a class="category_filter" data-value="Flat bed sheet " href="#" data-uriex="http://192.168.1.156/eles/bed-linen/flat-bed-sheet">
		 Flat bed sheet  
		 </a> 
	</div>
	 <div class="flItems">
	 	<a class="category_filter" data-value="Full bed sheets"  href="#" data-uriex="http://192.168.1.156/eles/bed-linen/full-bed-sheets">
	 		 Full bed sheets   
	 	</a> 
	 </div>
	 <div class="flItems">
		 <a class="category_filter" data-value="Twin bed sheet"  href="#" data-uriex="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> 
		 	Twin bed 		sheet  
		 </a> 
	 </div>
 </div>
 <div id="justClick"></div>
 <hr/>
<div id ="AllUri"></div>

＆＃13;

Jquery addClass不工作？

2 个答案: