1

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();
    }
});
});

框 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：有人知道如何为此添加淡出过渡吗？:)

4

1 回答 1

6

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

$(this).closest('.box').hide();
于 2012-06-06T22:58:08.537 回答