JQuery скрыть все соответствующие классы по щелчку

Question

Сценарий

Я нуждается в сокрытии всех связанных classes на click соответствующей кнопки.

Тогда один раз есть только один div осталось Мне нужно disable (или скрыть), что button.

Так скажите, если кто-то нажмет <button class="remove-box box-one">Remove</button>, он скроет все элементы, которые имеют только .box-one. Это аналогично для .box-two и .box-three.

NB: Я не могу изменить какую-либо наценку.

Вот мой код:

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/

Спасибо за ваше время.

UPDATE:

Спасибо за ответы, я буду работать через них, прежде чем выбрать наиболее подходящий. Благодарю.

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

Answer 2

Try:

$('.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 3

здесь это один работает, 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 4

fiddle Demo

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

Answer 5

Используйте .parent(), чтобы получить родительское окно.

http://jsfiddle.net/Fatgx/

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

Answer 6

Может быть, я что-то не хватает, но, конечно, вы можете просто FADEOUT родительский объект при нажатии на кнопку «Удален»?

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>