Question

有人觉得有点帮助我连接这个功能吗？ ul结构必须保持原样。

<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 / 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/

你明白这是如何运作的吗？

Jquery函数连接。仅将类添加/删除到下一个li

1 个答案: