如何在jQuery中显示随机两个li？

Question

请问如何在jQuery中随机显示两个li？我想这样的

$('#id_show12').click(function() { 
 
    var random1 = Math.floor(Math.random() * 7); 
 
    var random2 = Math.floor(Math.random() * 7); 
 
    $('.show12 li').not(':eq(' + random1 + '), :eq(' + random2 + ')').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="show12"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 
</div> 
 

 
<button id="id_show12">show only one two li</button>

https://jsbin.com/dafurasaye/edit?html,js,output

Answer 1

需要重启来显示所有的元素，然后在其上运行的逻辑，见下文

$('#id_show12').click(function() { 
 
    var random1 = Math.floor(Math.random() * 7); 
 
    var random2 = Math.floor(Math.random() * 7); 
 

 
    $('.show12 li') 
 
    .show() /* <-- reset */ 
 
    .not(':eq(' + random1 + '), :eq(' + random2 + ')') 
 
    .hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="show12"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul> 
 
</div> 
 
<button id="id_show12">show only one two li</button>

Answer 2

当你隐藏它们之前你展示的所有逻辑都很好用。

$('.show12 li').show(); 
$('.show12 li').not(':eq('+random1+'), :eq('+random2+')').hide(); 

目前它不工作，因为你隐藏了它们，并且当你再次点击时没有显示它们。

请注意，当随机数字相同时，您不处理这种情况。 （0,0 | 3,3）如果您不处理这种情况，有时它只显示一个选项。

Answer 3

JS代码：

$('#id_show12').click(function() { 
var random1= Math.floor(Math.random() * 7); 
var random2= Math.floor(Math.random() * 7); 
if(random1 == random2){ 
    if(random1 == 6){ 
     random1= 5; 
    } 
    if(random1 = 0){ 
    random1= 1; 
    } 
    else{ 
    random1=random1+1; 
    } 
} 

$("li").each(function(index) { 
     if(random1 != index & random2 != index){ 
      $(this).hide(); 
     } 
     else{   
      $(this).show(); 
     } 
}); 
})