1

7つの画像ボックスがあるページがあります。これらのボックスは、送信されるあらゆるタイプのアラートに対するお客様のエージェント向けのアラートボックスです。それらをすべてリンクとして設定しました。ボックスをクリックするとオレンジから青に変わり、その横に情報ボックスが開きます。各画像には独自の情報ボックスがあります。私はそれを部分的に機能させていますが、それは私が望むように機能していません。box1が開いていて、ユーザーがbox2をクリックした場合、box1はオレンジ色に戻り、box2の情報ボックスがスペースに表示されるように、その情報ボックスを閉じる必要があります。現在、他のボックスをクリックすると画像ボックスは青色のままになり、別の画像ボックスをクリックすると、情報ボックスを閉じる必要があるコードがバグアウトします。これが私のコードとHTMLの一部です:(更新）これが私の例のjsbinリンクです。ただし、クリックイベントが私のシステムで機能していません。トリガーが壊れたときに通常発生するページの一番上までスクロールしようとさえしませんが、href =＃はそこにあります。これが私の新しいコードです:)JSBin

  //JS
  $(document).ready(function () {

        function assignClickHandlerFor(boxNum) {

            $('#a' + boxNum).click(function (evt) {

                // returning false at the end implictly does these two lines. 
                evt.preventDefault();
                evt.stopPropagation();

                var $aBox = $(evt.currentTarget); // points to the  element 
              (ie, the link) clicked. 

                // locate the div that has both the `.active` class and the `.alertBox2` class
                var $prevAlert = $('.alertBox2.active');
                $prevAlert.find('.blue').hide();
                $prevAlert.find('.orange').show();
                $prevAlert.removeClass('active');

                $('.alertDetails').hide();


                $abox.find('.blue').show();
                $abox.find('.orange').hide();
                $abox.addClass('active');

                // show the required alert.
                $('#d' + boxNum).show();
            });

        }

        var i;

        for (i = 1; i <= 7; i++) {
            assignClickHandlerFor('Box' + i);
        }

    });
  //CSS
      .alertBox2
  {
      float:left; display:block; 
   }
   .alertDetails
   {
     display:none; background-color:#fff; width:250px; height:585px; float:left;                             position:relative; left:5px; top:8px; 
      }

    //HTML 
               <div><a href="#" id="aBox1" class="alertBox2" >
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a>
            </div> 
            <div><a href="#" id="aBox2" class="alertBox2">
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a></div>                
            <div><a href="#" id="aBox3" class="alertBox2">
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a></div>                     
        </div>
        <p id="alertDP">Click on any Alert to the left to see details</p>

        <div class="alertDetails" id="dBox1">
                Box1
        </div>
         <div class="alertDetails" id="dBox2">
                Box2
        </div>
         <div class="alertDetails" id="dBox3">
                Box3
        </div>
4

1 に答える 1

1

編集：あなたの問題についての私の理解を示すリンク。http://jsbin.com/ecelil/1/edit

いくつかの観察では、いずれかをクリックすると、aBoxそれ自体が切り替わるだけinfoBoxです。クリックハンドラーでは、aBox2それに気づき、3つのインフォボックスセレクターをjQueryに渡して修正しようとしたようです。ただし、jQueryはそのようには機能しません。セレクターは1つだけ受け入れます。ただし、そのセレクターはこれら3つの要素に一致する可能性があります。

aBox3つのクリックハンドラーのそれぞれの最初の行を次のように置き換えます$('.infoBox1, .infoBox2, .infoBox3').toggle();

コードが長すぎるのは、まあ、forループvariablesしcss class selectorsて、あなたの友達です:)

$(document).ready(function () {

    function assignClickHandlerFor(boxNum) {

        $('#a' + boxNum).click(function (evt) {

            // returning false at the end implictly does these two lines. 
            evt.preventDefault();
            evt.stopPropagation(); 

            var $aBox = $(evt.currentTarget); // points to the  element (ie, the link) clicked. 

            // locate the div that has both the `.active` class and the `.alertBox2` class
            var $prevAlert = $('.alertBox2.active'); 
            $prevAlert.find('.blue').hide();
            $prevAlert.find('.orange').show();
            $prevAlert.removeClass('active');

            $('.alertDetails').hide();


            $aBox.find('.blue').show();
            $aBox.find('.orange').hide();
            $aBox.addClass('active');

            // show the required alert.
            $('#d' + boxNum).show();
        });

    };

    var i;

    for (i = 1; i <= 7; i++) {
        assignClickHandlerFor('Box'+i);
    }

});

// css

.blue-info-box {
    background-image: url('Images/blue_alert_box.jpg');
}

.orange-info-box {
    background-image: url('Images/orange_alert_box.jpg');
}

// html

<div>
    <a href="#" id="aBox1" class="alertBox2" >
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div> 
<div>
    <a href="#" id="aBox2" class="alertBox2">
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div>
<div>
    <a href="#" id="aBox3" class="alertBox2">
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div>

<div class="alertDetails" id="dBox1">
        Box1
</div>
 <div class="alertDetails" id="dBox2">
        Box2
</div>
 <div class="alertDetails" id="dBox3">
        Box3
</div>
于 2012-11-29T00:46:36.157 に答える