Добавить и удалить класс

Question

У меня есть базовый HTML-код, использующий bootstrap, container> row> col> div ID> панель в этом порядке, класс помещается в идентификатор div, дело в том, что мне нужно удалить этот класс из этого DIV и поместил его в другой DIV (тот, на который вы нажимаете), я знаю, как проверить, существует ли класс в любом div внутри div, но я не знаю, как удалить его оттуда и добавить его в другой.

Я сделал Fiddle, чтобы проиллюстрировать этот вопрос. Когда вы загружаете страницу, класс уже существует. Если вы нажмете любое из полей, оно предупредит вас, что на самом деле класс существует, но не знает, какой из них имеет. Идея состоит в том, чтобы удалить класс из whaveter, который мог бы быть, и добавить его в выбранный вами div.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3"> 
      <div id="s1"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">1</div> 
        <div class="panel-body">1</div> 
      </div> 
      </div> 
     </div> 
    <div class="col-sm-3"> 
     <div id="s2" class="selection"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">2</div> 
        <div class="panel-body">2</div> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-3"> 
      <div id="s3"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">3</div> 
        <div class="panel-body">3</div> 
      </div> 
      </div> 
     </div> 
     <div class="col-sm-3"> 
      <div id="s4"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">4</div> 
        <div class="panel-body">4</div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

JS

$("#s1").click(function() { 
    if($(".selection")[0]) { 
     alert('Class exist'); 
     $(".selection")[0].removeClass('.selection'); 
    } 
}); 
$("#s2").click(function() { 
    if($(".selection")[0]) { 
     alert('Class exist'); 
     $(".selection")[0].removeClass('.selection'); 
    } 
}); 
$("#s3").click(function() { 
    if($(".selection")[0]) { 
     alert('Class exist'); 
     $(".selection")[0].removeClass('.selection'); 
    } 
}); 
$("#s4").click(function() { 
    if($(".selection")[0]) { 
     alert('Class exist'); 
     $(".selection")[0].removeClass('.selection'); 
    } 
}); 

Answer 1

Вы можете уменьшить свой код:

$("#s1,#s2,#s3,#s4").click(function() { 
    $(".selection").removeClass('selection'); 
    $(this).addClass('selection'); 
}); 

jsFiddle example

В вашем примере:

• $(".selection")[0].removeClass('.selection'); не нуждается в [0] и не должно быть никакого периода в классе вы переходите на removeClass()
• Вы ссылаетесь на div, вы нажмите $(this)
• Пока существует класс выбора, if($(".selection")[0]) { всегда будет правдой, поэтому на самом деле не имеет смысла использовать это как условие.

Answer 2

сделать это следующим образом:

$("#s1").click(function() { 

    // Check class on the clicked section 
    if($(this).hasClass('selection')) { 
     alert('Class exist'); 

     // class found then remove it. 
     $(this).removeClass('.selection'); 
    } 
}); 

Посмотрите на них, чтобы узнать больше: .hasClass(), .addClass(), .removeClass()

Answer 3

Вот путь к достижению того, что вам нужно. Что я сделал с вашим кодом является

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3"> 
      <div id="s1" class="divs"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">1</div> 
        <div class="panel-body">1</div> 
      </div> 
      </div> 
     </div> 
    <div class="col-sm-3"> 
     <div id="s2" class="selection divs"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">2</div> 
        <div class="panel-body">2</div> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-3"> 
      <div id="s3" class="divs"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">3</div> 
        <div class="panel-body">3</div> 
      </div> 
      </div> 
     </div> 
     <div class="col-sm-3"> 
      <div id="s4" class="divs"> 
      <div class="panel panel-default"> 
        <div class="panel-heading">4</div> 
        <div class="panel-body">4</div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

CSS

.container { 
    max-width:400px; 
} 
#s1:hover, #s2:hover, #s3:hover, #s4:hover { 
    border: 1px solid black; 
    cursor: pointer; 
} 
.selection { 
    background-color: black; 
    padding:15px; 
} 

Jquery

$(document).ready(function(){ 
    $(".panel").on("click",function(){ 
     var divid="#"+$(this).parent().attr("id"); 
     $(".divs").removeClass("selection"); 
     $(divid).addClass("selection"); 
    }); 
}); 

, что я только что добавили простой класс, как "дивы" Примечание для каждого родительского div панели.

Что я здесь сделал, так это то, что я сначала получил идентификатор родительского div панели, который был нажат пользователем. Затем я удалил класс «выбор» из родительских divs «s1 s2 s3 s4» доступ к нему с помощью общего класса «divs».то я добавил класс «выбор» в раздел, который был нажат.

Адрес DEMO для справки.

ПРИМЕЧАНИЕ. Этот код будет работать для любого количества панелей, которые вы создаете.