Javascript Селектор изображения: предотвратите выбора же изображение снова и снова

Question

Это код:

<script type="text/javascript"> 
function checked(id) { 
    $('#'+id).css("opacity","0.3"); 
    $("#check").clone().appendTo('#'+id); 
    $("#check").css('display','block'); 
    $("#check").css('margin','-125px 0 0 75px'); 
    $('#'+id).css('margin','0 0 0 -1px'); 
} 
</script> 

HTML код:

<div class="row-fluid"> 
    <div class="span3 mar_b"> 
     <a href="javascript:" onClick="checked('img1')" id="img1" class="img1"><img src="images/1.jpg" alt="img" /></a> 
    </div> 
    <div class="span3 mar_b"> 
     <a href="javascript:" onClick="checked('img2')" id="img2"><img src="images/2.jpg" alt="img" /></a> 
    </div> 
    <div class="span3 mar_b"> 
     <a href="javascript:" onClick="checked('img3')" id="img3"><img src="images/silverfish.jpg" alt="img" /></a> 
    </div> 
    <div class="span3 mar_b"> 
     <a href="javascript:" onClick="checked('img4')" id="img4"><img src="images/4.jpg" alt="img" /></a> 
    </div> 
</div> 

Пожалуйста, предложите мне.

Когда я нажимаю на изображение, он отлично подобран, но если я нажму на него снова, он будет выбран снова и снова.

Пожалуйста, дайте другое предложение, если есть .... Спасибо.

Answer 1

Я думаю, индикатор, выбран ли изображение, имеет ли он $("#check"). Если это так, в вашем коде я не вижу, где вы снимаете выделение изображения (удалите $("#check")). Он всегда добавляет все больше и больше. Обновите код, как это (не забудьте назначить класс check ваших #check, как мы будем использовать этот класс, чтобы искать клоны)

function checked(id) { 
    $('#'+id).css("opacity","0.3"); 
    if ($('#'+id).find(".check").length == 0){ 
     $("#check").clone().appendTo('#'+id); 
     $("#check").css('display','block'); 
     $("#check").css('margin','-125px 0 0 75px'); 
    } 
    else { 
     $('#'+id).find(".check").remove(); 
    } 
    $('#'+id).css('margin','0 0 0 -1px'); 
} 

При нажатии кнопки, она будет переключаться между выбранными и неотобранными состояниями

Answer 2

Попробуйте:

<script type="text/javascript"> 
var prevID=""; 
function checked(id) { 
    if(id!=prevID) 
    { 
     $('#'+id).css("opacity","0.3"); 
     $("#check").clone().appendTo('#'+id); 
     $("#check").css('display','block'); 
     $("#check").css('margin','-125px 0 0 75px'); 
     $('#'+id).css('margin','0 0 0 -1px'); 
     prevID=id; 
    } 
} 
</script> 

Answer 3

Я предполагаю, что вы пытаетесь осуществить переключающее действие. Поэтому вы должны проверить, проверен ли он, затем снимите флажок сначала, а затем проверьте его. вот чего вы хотите достичь. . Fiddler Demo

 .... 

     if($this.hasClass("selected")) { 
      $this 
       .removeClass("selected") 
       .find(".check") 
       .remove(); 
     } 
     else { 
      $this 
       .addClass("selected") 
       .find(".check") 
       .remove(); 
      ....