Question

我在网页上列出了十个产品，并使用下面的代码绑定css类以显示选择。如您所见，我为每个产品复制了相同的代码。我不擅长jQuery，也许有人可以建议优化来摆脱重复的代码？

$('.product1').bind('mouseenter mouseleave', function () {     
  $('.product1').has('div').closest("tr").children("td").not('.product1').toggleClass('product1-selected');
});

$('.product2').bind('mouseenter mouseleave', function () {  
     $('.product2').has('div').closest("tr").children("td").not('.product2').toggleClass('product2-selected');
});

$('.product3').bind('mouseenter mouseleave', function () {    
   $('.product3').has('div').closest("tr").children("td").not('.product3').toggleClass('product3-selected');
});

//and so on

HTML

<table class="product-table">
    <tr>
        <th>
        </th>
        <th class="product1">
            Free
        </th>
        <th class="product2">
            Basic
        </th>
        <th class="product3">
            Premium
        </th>
        <th class="product4">
            Elite
        </th>
    </tr>
    <tr>
        <td>     
        </td>
        <td class="price product1">
        </td>
        <td class="price product2">
            5.00 USD/Month
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 PayPal &raquo;" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=8VVZ8YWHZGNGC&amp;custom_user_id='" />
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 Plimus &raquo;" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296795&amp;custom_user_id='" />
        </td>
        <td class="price product3">
            15.00 USD/Month
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 PayPal &raquo;" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=NZ7TR9A3ZHZHS&amp;custom_user_id='" />
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 Plimus &raquo;" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296795&amp;custom_user_id='" />
        </td>
        <td class="price product4">
            25.00 USD/Month
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 PayPal &raquo;" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=W5VU287ZC2USQ&amp;custom_user_id='" />
            <br />
            <br />
            <input type="button" name="btnSignUp" value="Sign Up 
 Plimus &raquo;" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296805&amp;custom_user_id='" />
        </td>
    </tr>
    <tr>
        <td class="feature">
            Instant activation
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            For personal use
        </td>
        <td class="feature-marker product1">
            <div>X</div>
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            For organizational & business needs
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
        </td>
        <td class="feature-marker product3">
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Number of conversions per month
        </td>
        <td class="feature-marker product1">
            <div>30</div>
        </td>
        <td class="feature-marker product2">
            <div>100</div>
        </td>
        <td class="feature-marker product3">
            <div>Unlimited</div>
        </td>
        <td class="feature-marker product4">
            <div>Unlimited</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            PDF by e-mail usage
        </td>
        <td class="feature-marker product1">
            <div>30</div>
        </td>
        <td class="feature-marker product2">
            <div>100</div>
        </td>
        <td class="feature-marker product3">
            <div>Unlimited</div>
        </td>
        <td class="feature-marker product4">
            <div>Unlimited</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Create up to 20 additional memberships for free
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
        </td>
        <td class="feature-marker product3">
        </td>
        <td class="feature-marker product4">
        </td>
    </tr>
    <tr>
        <td class="feature">
            Removed Web2PDF logo from PDF's
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Remove ads
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Set and Save PDF options
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Conversion statistics
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            You will help us to keep this service running, add more features and grow
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Personal support
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
            <div>X</div>
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            New features on demand
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
        </td>
        <td class="feature-marker product3">
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Integration support
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
    <tr>
        <td class="feature">
            Priority in development queue
        </td>
        <td class="feature-marker product1">
        </td>
        <td class="feature-marker product2">
        </td>
        <td class="feature-marker product3">
            <div>X</div>
        </td>
        <td class="feature-marker product4">
            <div>X</div>
        </td>
    </tr>
</table>

Answer 1

我建议使用product1，product2等的id属性，然后为每个产品提供一类“产品”。然后，您可以将单个事件附加到所有产品，如下所示：

<th id="product1" class="product">
    Free
</th>

<th id="product2" class="product">
    Basic
</th>

<td id="price1" class="price">
</td>
<td id="price2" class="price">
</td>

$('.product').bind('mouseenter mouseleave', function () {     

    var $product = jQuery(this);
    var id = $product.attr('id');
    var num = id.replace("product", "");

    // Your desired logic follows:

    $('#price'+num).addClass('selected');

    $('.price').not('#price'+num).removeClass('selected');
});

Answer 2

使用您确切的jQuery代码，您可以将其缩减为更易读的版本：

for (var i = 1, len = 3; i < len; i++) {
    var $product = $('.product' + i);
    $product.hover(function () {
        $product
            .has('div')
            .closest('tr')
            .children('td')
            .not($product)
            .toggleClass('product'+ i +'-selected');
    });
}

但我认为必须有一种不同的，更好的方法来实现你的目标。我首先使用像.product这样的泛型类，并使用id作为每个产品的名称或编号。与selected类相同。然后我很确定这个选择器可以改进，但不能用你的代码告诉它。

$('.product1').has('div').closest("tr").children("td").not('.product1').toggleClass('product1-selected');

部分选择器和匹配

2 个答案: