祖父母の子供にクラスを追加するimg

Question

私はチェックボックス付きの画像をいくつか持っています。そのうちの1つをチェックすると、画像は新しいクラス「change-img」によって変更されるはずです。ここ はコードです：

<ul> 
    <li class="tech-vis"><img class="tech-img" src="..." alt="..."/></li> 
    <li class="check-tech"><input id="const-tech" class="checkbox-form inside" type="checkbox" name="tech[]" value="value1" /></li>              
</ul> 
<ul> 
    <li class="tech-vis"><img class="tech-img" src="..." alt="..."/></li> 
    <li class="check-tech"><input id="const-tech" class="checkbox-form inside" type="checkbox" name="tech[]" value="value2" /></li>              
</ul> 
... and etc. 

、スクリプト：

$("ul input[type=checkbox].inside").click(function() { 
    if($(this).is(":checked")) { 
     $(this).parents("ul img.tech-img").addClass("change-img"); 
    } 
    else { 
     $("img.tech-img").removeClass("change-img") 
    } 
}); 

私はクラスを追加しているが、どのように私は、この要素を呼び出すことができるところ、私はラインで間違っていることを知っていますか？

Answer 1

使用closest()またはparents()のように、子imgから親ulを分離することにより：

$(this).closest("ul").find('img.tech-img').addClass("change-img"); 
//Or 
$(this).parents("ul").find('img.tech-img').addClass("change-img"); 

注：idは、同じ文書内で一意である必要があります注意してください。

これが役に立ちます。他の提案@Tesla

$("ul input[type=checkbox].inside").click(function() { 
 
    var parent = $(this).parents("ul"); 
 

 
    if($(this).is(":checked")) { 
 
    parent.find('img.tech-img').addClass("change-img"); 
 
    } 
 
    else { 
 
    //Remove class from all img tags 
 
    $("img.tech-img").removeClass("change-img"); 
 

 
    //Remove class from related img tag 
 
    //parent.find('img.tech-img').removeClass("change-img"); 
 
    } 
 
});

.change-img{ 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="tech-vis"><img class="tech-img" src="http://hytorcatlantique.fr/wp-content/uploads/2014/11/android-icon.png" alt="..."/></li> 
 
    <li class="check-tech"><input id="const-tech1" class="checkbox-form inside" type="checkbox" name="tech[]" value="value1" /></li>              
 
</ul> 
 
<ul> 
 
    <li class="tech-vis"><img class="tech-img" src="http://hytorcatlantique.fr/wp-content/uploads/2014/11/android-icon.png" alt="..."/></li> 
 
    <li class="check-tech"><input id="const-tech2" class="checkbox-form inside" type="checkbox" name="tech[]" value="value2" /></li>              
 
</ul>