javascript - 几个触发器无法完全工作并且代码超长

Question

我有一个页面，其中有 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>

Answer 1

编辑:展示我对您的问题的理解的链接。 http://jsbin.com/ecelil/1/edit

一些观察，点击任何一个 aBox 只会切换其自己的 infoBox。在 aBox2 的点击处理程序中，您似乎已经注意到了这一点，并尝试通过将三个信息框选择器传递给 jQuery 来修复它。然而 jQuery 并不是这样工作的。它只接受一个选择器。然而，该选择器可以匹配这三个元素。

将三个 aBox 点击处理程序的第一行替换为 $('.infoBox1, .infoBox2, .infoBox3').toggle();

至于代码太长，那么，for循环、变量和css类选择器是你的 friend :)

$(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>