部分選擇器和匹配

我在網頁上列出了十種產品，並使用下面的代碼綁定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>

來源

2012-04-11 Tomas

你能不能請你發佈你的HTML。 – 2012-04-11 07:50:35

我發佈了html。 – Tomas 2012-04-11 07:53:15

我會建議使用產品1，產品2等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-11 07:54:07

對不起，我的編輯錯誤。你是對的。 – sarwar026 2012-04-11 08:05:21

我不能使用ID選擇器，因爲它重複對象和var $ product = jQuery（this）; var id = $ product.attr（'id'）;代碼將返回空值。經過測試，不工作！ – Tomas 2012-04-11 08:53:09

@Tomas：我的錯誤，我沒有看到你的HTML。我不確定我是否理解您想要的邏輯，但是我對代碼所做的更改應該會引導您朝正確的方向發展。 – 2012-04-11 09:15:18

以你確切的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-11 07:57:00 elclanrs

你的代碼似乎有問題。 toggleClass（'product'+ i +' - selected'總是返回循環中的最後一個迭代，在你的情況3中。似乎數字是通過引用傳遞的而不是作爲新對象傳遞的。 – Tomas 2012-04-11 08:43:07

部分選擇器和匹配

回答

相關問題