Question

LIVE SAMPLE 我尝试在jQuery中编写一个基本的单击过滤器脚本来查找3个类print, video, web并打开和关闭它们。我有1个点击监听器引用4个ID：#printInteract, #webInteract, #videoInteract, #allInteract

问题点击后我想切换包含一个或多个类切换的父.box。不幸的是，我的点击事件删除了引用的ID而不是父.box

*我如何抓住父母（这不是直接的父母||检查htmlbox）.box并隐藏/显示它？

的jQuery

$(document).ready(function () {

//attach a single click listener on li elements
$('li.navCenter').on('click', function () {

    // get the id of the clicked li
    var id = $(this).attr('id');

    //conditional cases
    if (id == 'printInteract') {
        $(".box").find('.web, .video').hide();
        $(".box").find('.print').show();
    }
    if (id == 'webInteract') {
        $(".box").find('.print, .video').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.print, .web').hide();
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').show();
    }
});
});

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
<div class="innerbox">
    <figure>
        <img src="#"
        />
    </figure>
    <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
    </ul>
</div>

html导航

  <li id="allInteract" class="navCenter">
    <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
</li>
<li id="printInteract" class="navCenter">
    <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
</li>
<li id="videoInteract" class="navCenter">
    <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
</li>
<li id="webInteract" class="navCenter">
    <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif"  /><h3>web</h3></div></a>
</li>

PS：有谁知道如何添加一个淡出过渡到这个？：）

Answer 1

也许您正在寻找.closest()：

$(this).closest('.box').hide();

如何在点击事件后在jQuery中找到非直接的“父”？

1 个答案: