0

我正在尝试实现电梯功能[有 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>
4

2 回答 2

0

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

尝试这个

$(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-12T10:05:14.067 回答
0

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

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

然后请注意，您现有的代码$(this).closest('.blockdiv .inactiveDiv')将找不到任何东西，因为遍历.closest()DOM并且元素是复选框的兄弟，而不是父级，因此请使用方法或使用来获取父级，然后返回到块分区。.blockDiv.prev().closest('.container').find('.blockDiv .inactiveDiv')

  $('.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-12T10:11:59.157 回答