Javascript兄弟onclick

Question

这与我之前提出的一个问题有关：Calling Javascript function after loading an AJAX page

基本上，在所有缩略图被动态加载到一个名为#left_box 的容器之前。使用下面的脚本，我可以让它突出显示所有兄弟姐妹中的一个 div。

$('.thumbnail_small').live('click', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

但是，为了适应新功能，我不得不将缩略图拆分到更多名为 .contain 的容器中。基本上#left_box 包含一系列.contain，其中包含x 个缩略图。现在，当我单击一个 .contain 中的缩略图时，它只会影响该容器中的兄弟姐妹，而不是更大的容器 #left_box。

我试过了

$('#left_box').on('click', '.thumbnail_small', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

但它不起作用。有任何想法吗？提前致谢。

Answer 1

我建议重复您的选择器，使用 not 方法排除当前元素：

$('#left_box').on('click', '.thumbnail_small', function(){
    $(this).css('border-color','#000');
    $('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});

这将选择您的#left_box 中的所有.thumbnail_small，排除点击的那个，然后将css应用于其余部分。