jQuery 在点击时隐藏所有匹配的类

Question

场景

我需要隐藏所有关联的 classes上click的相关按钮。

那么一旦只有一个div左边我需要disable (或隐藏)button .

假设有人点击 <button class="remove-box box-one">Remove</button>它将隐藏所有具有 .box-one 的元素仅有的。这与 .box-two 类似。和.box-three .

注意:我无法更改任何标记。

这是我的代码:

HTML

<div class="box box-one">
    <button class="remove-box box-one">Remove</button>
</div>
<div class="box box-two">
    <button class="remove-box box-two">Remove</button>
</div>
<div class="box box-three">
    <button class="remove-box box-three">Remove</button>
</div>

CSS

div {
    width: 200px; height: 200px;
    float: left;
    margin: 5px;
}
div.box-one {
    background: green;
}
div.box-two {
    background: yellow;
}
div.box-three {
    background: blue;
}

JS

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class');
    boxClass.each(function () {
        $(this).hide();
    }
    if ($('.remove-box') != null && < 2 ) {
        $(this).attr('disabled','disabled');
    }
});

fiddle

http://jsfiddle.net/jECX4/1/

感谢您的宝贵时间。

更新:

感谢您的回答，我将先浏览一下它们，然后再选择最合适的。谢谢。

Answer 1

使用它:

DEMO

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').split(' ').pop();
    $('.'+boxClass).hide();
    if ($('.remove-box:visible').length < 2 ) 
        $('.remove-box:visible').prop('disabled',true);
});