Question

我正在尝试研究JQuery，而且我很清楚如何定位一个具有兄弟div的特定类名的孩子。

HTML：

<div id="container">
    <div class="item">
        <div class="item-image">
            <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
        </div>
        <div class="item-name">
            Item 1
        </div>
        <div class="item-body">
            <div class="body-inner hidden">
                Body 1
            </div>
        </div>
    </div>
    <div class="item">
        <div class="item-image">
            <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
        </div>
        <div class="item-name">
            Item 2
        </div>
        <div class="item-body">
            <div class="body-inner hidden">
                Body 2
            </div>
        </div>
    </div>
</div>

JQuery的：

$('.item .item-image').bind({
    mouseenter: function() {
        $(this).siblings('.item-body').children('body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('body-inner').hide();
        console.log('Left');
    }
});

我尝试使用JQuery方法.next（）和siblings（）然后尝试让孩子使用.children（）方法，但它似乎不起作用。：/

Answer 1

body-inner需要.来表示类选择器：

$(this).siblings('.item-body').children('.body-inner').hide();

此外，从jQuery 1.7开始，.on方法优先于.bind：

$('.item .item-image').on({
    mouseenter: function() {
        $(this).siblings('.item-body').children('.body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('.body-inner').hide();
        console.log('Left');
    }
});

Updated Fiddle

Answer 2

您的代码运行正常。您只是缺少.来定位课程body-inner

$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here

此外，您应该使用.on()代替.bind()，最终代码如下：

$('.item .item-image').on({
    mouseenter: function() {
        $(this).siblings('.item-body').children('.body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('.body-inner').hide();
        console.log('Left');
    }
});

<强> Updated Fiddle

我只是注意到上面的演示无法正常显示您的第二张图片，因为您已经为第二张hidden添加了.item-body课程，您应该删除它以使其正常工作。

如果您无法修改自己的HTML代码，则可以使用 .eq() 和 .removeClass() 从中删除课程hidden第二个.item-body：

$('.item-body:eq(1)').removeClass('hidden');

<强> Updated Fiddle

Answer 3

或者，您可以使用hover和toggle()：

DEMO jsFiddle

$('.item .item-image').hover(function(){
    $(this).siblings('.item-body').children('.body-inner').toggle();       
});

PS：您应该在第二个hidden上移除课程.item-body，如jsFiddle

或仅使用CSS：

DEMO jsFiddle

.item-image:hover ~ .item-body > .body-inner {
    display: block;
}

Answer 4

您可以在外部div .item上绑定鼠标事件，并在jQuery中使用.find（）函数并导航到目标元素。这是带有.find（）

的js

$('.item').on({
    mouseenter: function () {
    $(this).find('.item-body .body-inner').show();
    },
    mouseleave: function () {
    $(this).find('.item-body .body-inner').hide();
    }
});

这是jsFiddle：http://jsfiddle.net/giri_jeedigunta/u45Ka/

如何使用jquery来定位兄弟div的子节点

4 个答案: