Jquery的连接函数.只添加/删除类到下一个li

Question

谁能帮我把这个函数连接起来?我们的结构必须保持原样。

<ul>
<li><a href="#"><img src="http://www.fillmurray.com/80/80"></a></li>
<li class="hidehot"><img src="http://i.imgur.com/K1SkRxC.png" id="hot"></li>
<li><a href="#"><img src="http://www.fillmurray.com/80/80"></a></li>
<li class="hidehot"><img src="http://i.imgur.com/K1SkRxC.png" id="hot"></li>
</ul>
li {
    list-style: none;
}
img#hot {
    width: 25px;
    position: absolute;
    margin-top: -50px;
}
.hidehot {
display: none;
}

$(document).ready(function(){
   $("li").removeClass("hidehot");   
}); 
/*
    $('img').click(function() {
    $('li').next??.addClass('hidehot');
    ??
*/    

Jquery在加载时删除了偶数li (.hot)上的hide类，所以所有的li都是可见的。

奇数li/a/img需要作为触发器，仅为下一个偶数li添加'hide'类。

然后我需要几个触发器中的任何一个来再次删除类，使其可见。

希望这有意义。任何帮助都非常感谢!!

给你一把小提琴https://jsfiddle.net/ChilledMonkeyBrain/sLv8gvy9/7/

Answer 1

你只需要一点点jQuery选择器的帮助。

$("li").removeClass("hidehot");  
$('img').click(function() {
    $(this).closest('li').next().addClass('hidehot');
});

https://jsfiddle.net/sLv8gvy9/9/

你明白这是怎么回事吗?