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。

次に、DOM をトラバースし、要素が親ではなくチェックボックスの兄弟であるため、既存のコードで$(this).closest('.blockdiv .inactiveDiv')は何も見つからないことに注意してください。代わりに、メソッドを使用するか、親を取得してからブロックに戻ります。 div。.closest().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 に答える