我需要过滤列表的json与jQuery

Question

产生我把一类就是等于期权的价值，我想它拉只具有相同的类中的“礼”，并隐藏其他

这里我尝试

$('#select-editorial').change(function() { 
 
    var valueedt = this.value; 
 
    console.log(valueedt); 
 

 
    if ($('.list-notice').find(valueedt)) { 
 
    $('.list-notice li').each(function() { 
 
     $(this).addClass('active'); 
 
    }) 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="list-notices"> 
 
    <li class="País"> 
 
    <a href="#"> 
 
     <div class="image"> 
 
     <img src="img/noticias/7.jpg" class="img-resp" alt="Como Facebook, Google e Twitter seriam na década de 80" height="163" width="277"> 
 
     </div> 
 
     <div class="text"> 
 
     <h1>Como Facebook, Google e Twitter seriam na década de 80</h1> 
 
     <p>"Ea excepteur deserunt occaecat et consequat eu do ut ut labore et laborum. Occaecat ipsum labore et mollit exercitation consequat commodo dolore. Cupidatat culpa velit quis occaecat non ipsum duis. " 
 
     </p> 
 
     </div> 
 
     <div class="btn"><span class="arrow"></span> 
 
     </div> 
 
    </a> 
 
    </li> 
 

 
    <li class="Rio"> 
 
    <a href="#"> 
 
     <div class="image"> 
 
     <img src="img/noticias/3.jpg" class="img-resp" alt="Grupo de artistas usa Cubos Mágicos para recriar personagens de games" height="163" width="277"> 
 
     </div> 
 
     <div class="text"> 
 
     <h1>Grupo de artistas usa Cubos Mágicos para recriar personagens de games</h1> 
 
     <p>"Non amet tempor magna minim. Veniam quis ad labore et quis anim ad. Incididunt do ullamco eiusmod sit officia irure dolore et pariatur dolor. Quis nulla ex fugiat esse ut magna. Non ut fugiat id anim do officia eu quis do qui amet minim magna. 
 
      " 
 
     </p> 
 
     </div> 
 
     <div class="btn"><span class="arrow"></span> 
 
     </div> 
 
    </a> 
 
    </li> 
 
</ul> 
 

 
And Follow the select form: 
 

 
<select class="select" name="select-editorial" id="select-editorial"> 
 
    <option>Editoria</option> 
 
    <option value="Esporte">Esporte</option> 
 
    <option value="País">País</option> 
 
    <option value="Rio">Rio</option> 
 
    <option value="Cultura">Cultura</option> 
 
    <option value="Internacional">Internacional</option> 
 
</select>

Answer 1

您应该添加一个公共类，你所有的li元素。然后，你可以很容易隐藏和激活只是其中之一：

<ul class="list-notices"> 
<li class="País myClass"><a href="#"><div class="image"><img src="img/noticias/7.jpg" class="img-resp" alt="Como Facebook, Google e Twitter seriam na década de 80" height="163" width="277"></div><div class="text"><h1>Como Facebook, Google e Twitter seriam na década de 80</h1><p>"Ea excepteur deserunt occaecat et consequat eu do ut ut labore et laborum. Occaecat ipsum labore et mollit exercitation consequat commodo dolore. Cupidatat culpa velit quis occaecat non ipsum duis. 
"</p></div><div class="btn"><span class="arrow"></span></div></a></li> 

<li class="Rio myClass"><a href="#"><div class="image"><img src="img/noticias/3.jpg" class="img-resp" alt="Grupo de artistas usa Cubos Mágicos para recriar personagens de games" height="163" width="277"></div><div class="text"><h1>Grupo de artistas usa Cubos Mágicos para recriar personagens de games</h1><p>"Non amet tempor magna minim. Veniam quis ad labore et quis anim ad. Incididunt do ullamco eiusmod sit officia irure dolore et pariatur dolor. Quis nulla ex fugiat esse ut magna. Non ut fugiat id anim do officia eu quis do qui amet minim magna. 
"</p></div><div class="btn"><span class="arrow"></span></div></a></li> 
</ul> 

现在，jQuery的：

$('#select-editorial').change(function(){ 
    var valueedt = $(this).value; 
    console.log(valueedt); 

    $('.myClass').hide(); 
    $('.' + valueedt).show().addClass('active'); 

}); 

而且，如果你不能添加普通类（MyClass的）：

$('#select-editorial').change(function(){ 
    var valueedt = $(this).value; 
    console.log(valueedt); 

    $('.list-notices li').hide(); 
    $('.list-notices li.' + valueedt).show().addClass('active'); 

}); 

Answer 2

试试这个，我得到与类的设定值，并显示了礼，如果没有课，隐藏元素

$('#select-editorial').change(function(){ 
 
    var valueedt = '.' + this.value; 
 
    $('.list-notices li' +valueedt).addClass('active').show(); 
 
    $('.list-notices li').not(valueedt).removeClass('active').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-notices"> 
 
<li class="País"><a href="#"><div class="image"><img src="img/noticias/7.jpg" class="img-resp" alt="Como Facebook, Google e Twitter seriam na década de 80" height="163" width="277"></div><div class="text"><h1>Como Facebook, Google e Twitter seriam na década de 80</h1><p>"Ea excepteur deserunt occaecat et consequat eu do ut ut labore et laborum. Occaecat ipsum labore et mollit exercitation consequat commodo dolore. Cupidatat culpa velit quis occaecat non ipsum duis. 
 
"</p></div><div class="btn"><span class="arrow"></span></div></a></li> 
 

 
<li class="Rio"><a href="#"><div class="image"><img src="img/noticias/3.jpg" class="img-resp" alt="Grupo de artistas usa Cubos Mágicos para recriar personagens de games" height="163" width="277"></div><div class="text"><h1>Grupo de artistas usa Cubos Mágicos para recriar personagens de games</h1><p>"Non amet tempor magna minim. Veniam quis ad labore et quis anim ad. Incididunt do ullamco eiusmod sit officia irure dolore et pariatur dolor. Quis nulla ex fugiat esse ut magna. Non ut fugiat id anim do officia eu quis do qui amet minim magna. 
 
"</p></div><div class="btn"><span class="arrow"></span></div></a></li> 
 
</ul> 
 

 
<select class="select" name="select-editorial" id="select-editorial"> 
 
         <option>Editoria</option> 
 
         <option value="Esporte">Esporte</option> 
 
         <option value="País">País</option> 
 
         <option value="Rio">Rio</option> 
 
         <option value="Cultura">Cultura</option> 
 
         <option value="Internacional">Internacional</option> 
 
         </select>

Answer 3

您需要正确拼写类，并使用隐藏和显示

还需要一个前缀类名“”

像这样：

FIDDLE

$('#select-editorial').on("change",function() { 
    var valueedt = this.value; 
    console.log(valueedt); 
    $('.list-notices li').hide(); 

    $('.list-notices .'+valueedt).show(); 
}); 

li { display:none } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<ul class="list-notices"> 
    <li class="País"> 
    <a href="#"> 
     <div class="image"> 
     <img src="img/noticias/7.jpg" class="img-resp" alt="Como Facebook, Google e Twitter seriam na década de 80" height="163" width="277"> 
     </div> 
     <div class="text"> 
     <h1>Como Facebook, Google e Twitter seriam na década de 80</h1> 
     <p>"Ea excepteur deserunt occaecat et consequat eu do ut ut labore et laborum. Occaecat ipsum labore et mollit exercitation consequat commodo dolore. Cupidatat culpa velit quis occaecat non ipsum duis. " 
     </p> 
     </div> 
     <div class="btn"><span class="arrow"></span> 
     </div> 
    </a> 
    </li> 

    <li class="Rio"> 
    <a href="#"> 
     <div class="image"> 
     <img src="img/noticias/3.jpg" class="img-resp" alt="Grupo de artistas usa Cubos Mágicos para recriar personagens de games" height="163" width="277"> 
     </div> 
     <div class="text"> 
     <h1>Grupo de artistas usa Cubos Mágicos para recriar personagens de games</h1> 
     <p>"Non amet tempor magna minim. Veniam quis ad labore et quis anim ad. Incididunt do ullamco eiusmod sit officia irure dolore et pariatur dolor. Quis nulla ex fugiat esse ut magna. Non ut fugiat id anim do officia eu quis do qui amet minim magna. 
      " 
     </p> 
     </div> 
     <div class="btn"><span class="arrow"></span> 
     </div> 
    </a> 
    </li> 
</ul> 



<select class="select" name="select-editorial" id="select-editorial"> 
    <option>Editoria</option> 
    <option value="Esporte">Esporte</option> 
    <option value="País">País</option> 
    <option value="Rio">Rio</option> 
    <option value="Cultura">Cultura</option> 
    <option value="Internacional">Internacional</option> 
</select>