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

小提琴

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

谢谢你的时间。

更新：

感谢您的回答，我会在选择最合适之前仔细检查。感谢。

Answer 1

尝试：

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').split(" ");
    var len = boxClass.length;    
    var cls = "";
    for(var i=0;i<len;i++){
        if(boxClass[i].indexOf("box-") >= 0){
            cls = boxClass[i];
            break;
        }
    }
    if(cls != ""){
        $("."+cls).hide();
    }
});

Updated fiddle here.

Answer 2

使用：

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

Answer 3

使用.parent()获取父框。

http://jsfiddle.net/Fatgx/

$('.remove-box').click(function () {
    $(this).parent().hide();
    if ($('.box:visible').length <= 1) {
        $('.remove-box').prop('disabled',true);
    }
});

Answer 4

这里有一个工作，http://jsfiddle.net/victorrseloy/wz5X3/

你的js应该是：

$('.remove-box').click(function () {
    //var element = $(this);
    var boxClass = $(this).attr('class').split(/\s+/);
    $(boxClass).each(function () {
        if(this != "remove-box"){
            $("."+this).hide()
        }
    });
    if ($('.remove-box') != null && $('.remove-box').length< 2 ) {
        $(this).attr('disabled','disabled');
    }
});

Answer 5

fiddle Demo

$('.remove-box').click(function () {
    var boxClass = $(this).attr('class').match(/(box-.+)(?:\s|$)/g)[0];
    $('.'+boxClass).hide();
});

Answer 6

也许我错过了一些东西，但是当你点击“删除”按钮时，你肯定可以淡出父对象吗？

http://jsfiddle.net/jECX4/12/

$('.remove-box').on("click", function () {
    $(this).parent().fadeOut();
});

<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>

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

6 个答案: