在复选框上移动 div 已选中答案

【问题标题】：move the div upon checkbox checked在复选框上移动 div 已选中
【发布时间】：2013-04-12 09:56:18
【问题描述】：

我正在尝试实现电梯功能[有 6 层和相应的
每个人都有一个复选框。根据选中的复选框，电梯
舒德搬到那层楼。

但该功能似乎无法正常工作。

这是我的带有嵌入 jquery 脚本的 HTML 标记：

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

【问题讨论】：

标签： jquery checkbox css-selectors

【解决方案1】：

首先将 JS 包装在文档就绪处理程序中，否则它将无法找到您的元素。（或者将脚本移动到正文的末尾。）

然后更新您的 CSS 以在 .inactiveDiv 之后定义 .activeDiv 类，这样如果一个元素具有两个类 .activeDiv 将覆盖 .inactiveDiv - 这样您就不必担心删除 .inactiveDiv，你可以添加和删除.activeDiv。

然后请注意，您现有的代码 $(this).closest('.blockdiv .inactiveDiv') 将找不到任何东西，因为 .closest() 遍历 up 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') 更简单、更快捷。

【讨论】：

非常感谢 nnnnnn。我只是在想是否可以显示橙色 div 从一层移动到另一层。让它看起来更加生动和生动。

【解决方案2】：

移除非活动类并添加活动类

试试这个

$(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");

    }
 });
});

【讨论】：

感谢 bipen 的所有帮助。你能帮我看看橙色 div 从一层移动到另一层吗？让它看起来更加生动和生动。