javascript - 如何限制对 jQuery 变量值的更改？

Question

我有一个表格，每个 tr 元素在白色和灰色背景之间交替。当用户将鼠标悬停在 tr 元素上时，背景变为绿色。当用户单击 tr 元素时，将出现位于所单击的 tr 元素下方的隐藏 tr 元素。那时，用户点击的 tr 元素和出现的 hidden 元素的背景设置为蓝色。当用户再次点击 tr 元素时，下面的 tr 元素再次被隐藏。此时，背景颜色应恢复为默认颜色白色或灰色。相反，它保持蓝色。

我知道为什么会这样，我只是不确定如何在 jQuery 中修复它。这是我的 HTML:

 <div class="retail-listing">
<div class="container">
  <table>
      <tr>
        <th>Date</th>
        <th>Sales Price</th>
        <th>Odometer</th>
        <th>Year</th>
        <th>Series</th>
        <th>Body</th>
        <th>Drive Type</th>
      </tr>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table> 
    <table>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table>  
</div>

这是我的脚本:

$(function() {

    var bgColor = $('.retail-list-top').css('background-color');

    $('.retail-list-detail').hide();

    $('.retail-list-top').hover(function () {
        $(this).css("background-color", "#c9e9a4");
    },
        function() {
            $(this).css("background-color", bgColor);
        }
    );

    $('.retail-list-top').bind('click', function() {

        $(this).toggleClass('detail-slide');

        if ($(this).hasClass('detail-slide')) {
            $(this).closest('table').next().find('.retail-list-detail').show();
            $(this).css({backgroundColor :"#e1eff4", border : "none"});
            $(this).hover(function () {
                $(this).css("background-color", "#e1eff4");
            },
                function () {
                    $(this).css("background-color", "#e1eff4");
                }
            );
        } else {
            $(this).closest('table').next().find('.retail-list-detail').hide();
            $(this).css({backgroundColor : bgColor, borderBottom : "1px solid #c4c4c4"});
        }
    })
});

Answer 1

我建议通过使用 CSS 大大简化这一过程。我已经这样做了，here .

我还利用添加和删除类 blue 来为“打开的”表格行提供蓝色背景。这样一来，点击的时候就不是内联样式了，只是在一个类中。

JS

$(function() {

    $('.retail-list-top').click( function() {

        $(this).toggleClass('detail-slide');

        if ($(this).hasClass('detail-slide')) {
            $(this).closest('table').next().find('.retail-list-detail').show();
            $(this).addClass('blue');
        } else {
            $(this).closest('table').next().find('.retail-list-detail').hide();
            $(this).removeClass('blue');
        }
    })
});

CSS

.retail-list-top:hover{
    background:#c9e9a4;
}

.retail-list-detail{
    display:none;
}

.blue{
    background:#e1eff4;
}