Question

我有关节和纽扣以及文章的类别。如果我按类别“ jquery”，我需要那些类别为“ jquery”的人，其他人将显示。但是有一些问题。是的，我知道我会显示具有该类别的文章。但我反之亦然

function containsJavascript() {
	var artTwo = $('.article .category');
	var art = $('.category');
     $(".article").each(function(index){
 $(this).has(".category:not(:contains('JavaScript'))").addClass('display');
});
}
function containsJquery() {
	var artTwo = $('.article .category');
	var art = $('.article');
   $(".article").each(function(index){
 $(this).has(".category:not(:contains('jQuery'))").addClass('display');
});
}
function containsCss() {
	var artTwo = $('.article .category');
	var art = $('.category');
     $(".article").each(function(index){
 $(this).has(".category:not(:contains('CSS'))").addClass('display');
});
}

.display {
	display: none;
}

   <div class="menu-navigation-lessons">
  <a class="nav-lessons" onclick="containsJavascript()" href="#">JavaScript</a>
  <a class="nav-lessons" onclick="containsJquery()" href="#">jQuery</a>
  <a class="nav-lessons" onclick="containsCss()" href="#">CSS</a>
</div>
<div class="article">
       <div class="title_article">
	       <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2></a>
		   <div class="description">
		   <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex mollitia dolores dignissimos velit voluptas.
		    Hic perspiciatis dolorum ullam delectus voluptatibus atque nobis aspernatur! Consequatur quo eos delectus! 
			Laboriosam, reprehenderit vel. </p>
			<p class="category"> <span>category</span>: JavaScript </p>
		   </div>
	</div>
	</div>
	     <div class="article">
       <div class="title_article">
	       <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>
       <p class="category"> <span>category</span>: jQuery </p>
	</div>
	</div>
	
  	     <div class="article">
       <div class="title_article">
	       <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>
       <p class="category"> <span>category</span>: Css </p>
	</div>
	</div>

Answer 1

要切换哪些article元素具有显示类，您必须先删除该类，然后再将该类分配给所需的元素...

function containsJavascript() {
     var artTwo = $('.article .category');
     var art = $('.category');
     $(".article").removeClass('display').each(function(index){
         $(this).has(".category:not(:contains('JavaScript'))").addClass('display');
     });
}
function containsJquery() {
    var artTwo = $('.article .category');
    var art = $('.article');
    $(".article").removeClass('display').each(function(index){
        $(this).has(".category:not(:contains('jQuery'))").addClass('display');
    });
}
function containsCss() {
    var artTwo = $('.article .category');
    var art = $('.category');
    $(".article").removeClass('display').each(function(index){
       $(this).has(".category:not(:contains('CSS'))").addClass('display');
    });
}

或者当您遍历元素并根据该评估添加或删除类时，对该元素进行某种评估...

function containsJavascript() {
     var artTwo = $('.article .category');
     var art = $('.category');
     $(".article").each(function(index){
         if ($(this).has(".category:not(:contains('JavaScript'))").length > 0){
             $(this).addClass('display');
         } else {
             $(this).removeClass('display');
         }
     });
}
function containsJquery() {
    var artTwo = $('.article .category');
    var art = $('.article');
    $(".article").removeClass('display').each(function(index){
        if ($(this).has(".category:not(:contains('JQuery'))").length > 0){
             $(this).addClass('display');
         } else {
             $(this).removeClass('display');
         }
    });
}
function containsCss() {
    var artTwo = $('.article .category');
    var art = $('.category');
    $(".article").removeClass('display').each(function(index){
       if ($(this).has(".category:not(:contains('CSS'))").length > 0){
             $(this).addClass('display');
         } else {
             $(this).removeClass('display');
         }
    });
}

如果不包含全部，将显示

1 个答案: