如何在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(); 
     } 
}); 
})