переместить div на флажок отмечен

Я пытаюсь реализовать функциональность лифта [есть 6 этажей и соответствует
каждому, есть флажок. В зависимости от того, какой флажок установлен, лифт
shud переместится на этот этаж.переместить div на флажок отмечен

Но функциональность как-то не работает.

Вот мой HTML разметка со встроенным Jquery сценарием:

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Sample Page</title> 
      <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script language="javascript" type="text/javascript"> 

    $('.container input').change(function(){ 
    if ($(this).is(':checked')){ 
      if ($('div.activeDiv')[0]) { 
      $(".blockdiv>div").removeClass("activeDiv");} 
      $(this).closest('.blockdiv .inactiveDiv').addClass("activeDiv"); 
    } 
    }); 

    </script> 
    <style> .blockDiv { 
    width: 60px; 
    height: 60px; 
    background: #0000FF; 
    border: 2px solid #000; 
} 

.activeDiv{ 
    width: 45px; 
    height: 45px; 
    background: #FFAC00; 
    margin-left: 8px; 
    margin-top: 8px; 
} 
.inactiveDiv{ 
    background: #0000FF; 
}</style> 
     </head> 
     <body> 
      <div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="inactiveDiv"></div> 
       </div>    
      <input type="checkbox" name="floorCheck" value="fifthFloor"/> 
      </div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="inactiveDiv"></div> 
       </div> 
       <input type="checkbox" name="floorCheck" value="fourthFloor"/> 
      </div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="inactiveDiv"></div> 
       </div> 
       <input type="checkbox" name="floorCheck" value="thirdFloor"/> 
      </div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="inactiveDiv"></div> 
       </div> 
       <input type="checkbox" name="floorCheck" value="secondFloor"/> 
      </div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="inactiveDiv"></div> 
       </div> 
       <input type="checkbox" name="floorCheck" value="firstFloor"/> 
      </div> 
      <div class="container"> 
       <div class="blockDiv"> 
        <div class="activeDiv"></div> 
       </div> 
       <input type="checkbox" name="floorCheck" value="groundFloor"/> 
      </div> 
      </div> 
     </body> 
    </html>

источник

2013-04-12 Ankit

удалить неактивный CLAS и добавить активный класс

попробовать это

$(function(){ //this is to call the script only after document is ready 
    $('.container input').change(function() { 
    if ($(this).is(':checked')) { 

     $(".blockDiv > div").removeClass("activeDiv"); 
     $(this).siblings('.blockDiv').find('.inactiveDiv').addClass("activeDiv"); 

    } 
}); 
});

источник

2013-04-12 10:05:14 bipen

не работает. Пожалуйста, взгляните еще раз. – Ankit

Вы получаете какую-либо ошибку, проверяя свою консоль. – bipen

Спасибо, bipen за помощь. Не могли бы вы помочь мне, показывая оранжевый div, движущийся с одного этажа на другой. Сделать его более живым и оживленным. – Ankit

Начало обертывания JS в документе готовый обработчик, или он не сможет найти ваши элементы. (Или переместить сценарий до конца тела.)

Затем обновите ваш CSS, чтобы определить .activeDiv класс после того, как .inactiveDiv так, что если элемент имеет оба класса .activeDiv перекроет .inactiveDiv - таким образом, вы не должны беспокоиться об удалении .inactiveDiv, вы можете просто добавить и удалить .activeDiv.

Затем обратите внимание, что существующий код $(this).closest('.blockdiv .inactiveDiv') ничего не найдет, потому что .closest() траверсы до через DOM и .blockDiv элементов являются братьями и сестрами из флажков, а не родители, поэтому вместо того, чтобы использовать либо метод .prev() или использовать .closest('.container'), чтобы получить родительский, а затем .find('.blockDiv .inactiveDiv'), чтобы вернуться к блоку div.

$('.container input').change(function() { 
     if (this.checked) { 
      $(".blockDiv > div").removeClass("activeDiv"); 
      $(this).closest('.container').find('.blockDiv .inactiveDiv').addClass("activeDiv"); 
     } 
    });

Демо: http://jsfiddle.net/rrCam/

Заметим также, что this.checked проще и быстрее, чем $(this).is(':checked').

источник

2013-04-12 10:11:59 nnnnnn

Большое вам спасибо nnnnnn. Я просто думаю, если можно показать оранжевый div, движущийся с одного этажа на другой. Сделать его более живым и оживленным. – Ankit

переместить div на флажок отмечен

ответ

Смежные вопросы