Добавление класса на изображение?

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 от вызывающего абонента и использовать его внутри функции,

Markup: Добавлено 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 

В качестве альтернативы, это хорошая практика, чтобы использовать ненавязчивый способ .. Ниже,

Markup: Добавлено 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'); 
});