Question

我正在尝试实施电梯功能[有6层楼和相应的
每个人都有一个复选框。根据检查的复选框，电梯
shud移动到那个楼层。

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

这是我的嵌入式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>

Answer 1

删除不活动的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");

    }
 });
});

Answer 2

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

然后更新您的CSS以在.activeDiv之后定义.inactiveDiv类，以便如果某个元素同时具有两个类.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')更简单，更快。

移动div选中复选框

2 个答案: