Выбор правильных детей класса

Question

<div class="movies"> 
    <div class="movie" id="226260" movie-id="226260"> 
    <div class="movie-header"> 
     <h4 class="">Boyhood</h4> 
     <div class="movie-trailer-tools movie-tools"> 
     <a class="add-trailer" data-toggle="modal" href=""> 
      <img src="assets/images/_.gif" class="icon ic_b_table_add"> 
     </a> 
     <a href="#" class="toggle-visibility"> 
      <img src="assets/images/_.gif" class="icon ic_eye"> 
     </a> 
     </div> 
     <div class="movie-link"></div> 
    </div> 
    </div> 
</div> 

<script> 
    $('.movies').on("click", '.toggle-visibility',function(event){ 
     eyeImg = $(this).closest('.movie').children('.toggle-visibility').children('img'); 
     var toRem = eyeImg.hasClass('ic_eye') ? 'ic_eye' : 'ic_eye_grey'; 
     var toAdd = eyeImg.hasClass('ic_eye') ? 'ic_eye_grey' : 'ic_eye'; 
     eyeImg.removeClass(toRem).addClass(toAdd); 
    }); 
</script> 

Я хочу изменить класс «значок ic_eye» на «значок ic_eye_grey» и наоборот из класса «тумблер видимости», когда пользователь нажимает на изображение, но мой JQuery код не делает это правильно. Может ли кто-нибудь помочь мне получить правильное значение переменной eyeImg?

Кстати, может быть несколько div class = "movie", потому что отображение фильмов находится внутри цикла.

Answer 1

img вы ищете является дочерним щелкнули toggle-visibility элемента, так что вы можете использовать .find() в контексте this, чтобы найти его. Затем вы можете использовать toggleClass(), чтобы переключить класс

$('.movies').on("click", '.toggle-visibility', function(event) { 
 
    $(this).find('img').toggleClass('ic_eye_grey ic_eye'); 
 
    event.preventDefault(); 
 
})

.ic_eye { 
 
    border: 1px solid red; 
 
} 
 
.ic_eye_grey { 
 
    border: 1px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="movies"> 
 
    <div class="movie" id="226260" movie-id="226260"> 
 
    <div class="movie-header"> 
 
     <h4 class="">Boyhood</h4> 
 
     <div class="movie-trailer-tools movie-tools"> 
 
     <a class="add-trailer" data-toggle="modal" href=""> 
 
      <img src="assets/images/_.gif" class="icon ic_b_table_add" /> 
 
     </a> 
 
     <a href="#" class="toggle-visibility"> 
 
      <img src="//placehold.it/16" class="icon ic_eye" /> 
 
     </a> 
 
     </div> 
 
     <div class="movie-link"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Пожалуйста, измените:

eyeImg = $(this).closest('.movie').children('.toggle-visibility').children('img'); 
var toRem = eyeImg.hasClass('ic_eye') ? 'ic_eye' : 'ic_eye_grey'; 
var toAdd = eyeImg.hasClass('ic_eye') ? 'ic_eye_grey' : 'ic_eye'; 
eyeImg.removeClass(toRem).addClass(toAdd); 

To:

var eyeImg = $(this).children('img'); 
eyeImg.toggleClass('ic_eye ic_eye_grey');