0

Web ページに 10 個の製品がリストされており、以下のコードを使用して 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>
4

2 に答える 2

0

正確な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');
于 2012-04-11T07:57:00.420 に答える
0

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');
});
于 2012-04-11T07:54:07.113 に答える