在图片上添加课堂点击？

Question

function updateOption(selection, option) { 
     jQuery('body,html').animate({ 
      scrollTop: jQuery("#msg").offset().top 
     }, 800); 
     jQuery('.'+selection).each(function() { 
      jQuery("img."+selection).removeClass("optionSelected"); 
     }); 
     jQuery.ajax({ 
      type: "GET", 
      url: "../v1_include/v1_session_boutique.inc.php", 
      data: selection + "=" + option, 
      success: function(msg){ 
       jQuery('#msg').fadeIn('fast'); 
       var List = document.getElementById('msg'); 
       List.innerHTML = msg; 
        jQuery(".StoreMsgPanier").animate({ opacity: 0.25 }, 1000) 
        .animate({ opacity: 1 }, 1000); 
      } 
     }); 
} 


<p>Option 1</p> 
<div id="opt3"> 
    <a href="javascript:updateOption('select_1_3','1-5-1');"><img src="../v1_images_option/crop/5_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_3 optionSelected" /></a> 
    <a href="javascript:updateOption('select_1_3','1-6-1');"><img src="../v1_images_option/crop/6_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_3" /></a> 
</div> 
<p>Option 2</p> 
<div id="opt2"> 
    <a href="javascript:updateOption('select_1_2','1-3-1');"><img src="../v1_images_option/crop/3_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_2" /></a> 
    <a href="javascript:updateOption('select_1_2','1-4-1');"><img src="../v1_images_option/crop/4_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_2" /></a> 
</div> 

此代码工作正常，但我怎么能，删除所有“optionSelected”下课后，添加“optionSelected” 只有我只是点击的形象呢？

感谢您的帮助......

Answer 1

您可以从主叫通this，并用它在函数内部，

标记：新增this到updateOption函数调用

<a href="javascript:updateOption('select_1_3','1-5-1', this);"> 

JS：更改为_this.find(..

function updateOption(selection, option, _this) { 
    //.. 
    //... 
     $(_this).parent().find("img").removeClass("optionSelected"); //remove class for all images 
     $(_this).find("img").addClass("optionSelected"); //add class to the image inside the link 

或者，这是很好的做法是使用不显眼的方式..见下文，

标记：新增this到updateOption函数调用

<p>Option 1</p> 
<div id="opt3"> 
    <a href="javascript: void(0)" data-opt="1-5-1" data-sel="select_1_3"><img src="../v1_images_option/crop/5_1.jpg" alt="Image" class="select_1_3 img_style optionSelected" /></a> 
    <a href="javascript: void(0);" data-opt="1-6-1" data-sel="select_1_3"><img src="../v1_images_option/crop/6_1.jpg" alt="Image" class="select_1_3 img_style" /></a> 
</div> 
<p>Option 2</p> 
<div id="opt2"> 
    <a href="javascript: void(0)" data-opt="1-3-1" data-sel="select_1_2"><img src="../v1_images_option/crop/3_1.jpg" alt="Image" class="select_1_2 img_style" /></a> 
    <a href="javascript: void(0)" data-opt="1-4-1" data-sel="select_1_2"><img src="../v1_images_option/crop/4_1.jpg" alt="Image" class="select_1_2 img_style" /></a> 
</div> 

CSS ：

.img_style { margin:2px;padding:5px;border:1px solid #D6D6D6; } 

最后JS：一堆修改，请在实现它之前尝试理解它。

$(function() { 
    $('.img_style').click(function() { 
     $('body,html').animate({ 
      scrollTop: $("#msg").offset().top 
     }, 800); 

     var $this = $(this);   

     $this //current link 
     .closest('div') //will return you the enclosing div lets say <div id="opt2"> 
     .find('img') //find all images inside <div id="opt2"> 
     .removeClass("optionSelected"); //remove class 

     $this.addClass('optionSelected'); 

     var $parent = $this.parent(); 

     var option = $parent.attr('data-opt'); //will return you the option 
     var selection = $parent.attr('data-sel'); 

     $.ajax({ 
      type: "GET", 
      url: "../v1_include/v1_session_boutique.inc.php", 
      data: selection + "=" + option, 
      success: function(msg) { 
       $('#msg').fadeIn('fast').html(msg); 

       $(".StoreMsgPanier").animate({ 
        opacity: 0.25 
       }, 1000).animate({ 
        opacity: 1 
       }, 1000); 
      } 
     }); 
    }); 
}); 

DEMO - >显示检索选项和选择。

Answer 2

$('#id_of_image').on('click', function() { 
    $('img').removeClass('optionSelected'); 
    $(this).addClass('optionSelected'); 
});