运维开发网

如何定位未使用jQuery单击的同一类的项目?

运维开发网 https://www.qedev.com 2020-06-03 14:30 出处:网络 作者:运维开发网整理
我所拥有的是同一级别的3个div但具有唯一ID,当我单击一个框时我想隐藏其他2个. 这不是问题,我可以用一些if / elses或case语句来实现它,但我想知道是否有更通用/有效的方法来隐藏同一类的所有元素,而不是那个被点击了? <div id="boxes"> <div id="box1" class="box">Box 1</div> <div id="box2" class
我所拥有的是同一级别的3个div但具有唯一ID,当我单击一个框时我想隐藏其他2个.

这不是问题,我可以用一些if / elses或case语句来实现它,但我想知道是否有更通用/有效的方法来隐藏同一类的所有元素,而不是那个被点击了?

<div id="boxes">
    <div id="box1" class="box">Box 1</div>
    <div id="box2" class="box">Box 2</div>
    <div id="box3" class="box">Box 3</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.box').click(function() {
        $(this).html('hi');
        if ($(this).attr('id') == 'box1')
        {
            $('#box2').hide('slow');
            $('#box3').hide('slow');
        }
       .......... more if's     
    });
});
</script>
您可以使用 .not过滤器功能来引用“其他”框.这样,即使框不一定是DOM树中的兄弟,或者如果有一些不是框的其他兄弟,代码也会工作.

var $boxes = $('.box');
$boxes.click(function() { 
    $(this).html('hi'); 
    $boxes.not(this).hide('slow');
});

请注意,我正在缓存$(‘.box’)的结果以表现 – 无疑它不会引人注意,但没有理由不这样做.

0

精彩评论

暂无评论...
验证码 换一张
取 消