Teilselektor und passende

Question

Ich habe zehn Produkte auf einer Webseite aufgelistet und verwenden Sie den folgenden Code, um CSS-Klasse zu binden, um Auswahl anzuzeigen. Wie Sie sehen können, habe ich den gleichen Code für jedes Produkt dupliziert. Ich bin nicht gut in jQuery, vielleicht könnte jemand Optimierung vorschlagen, um doppelten Code loszuwerden?

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

Ich würde empfehlen, id-Attribute für product1, product2 usw. verwenden, und dann jedes Produkt eine Klasse von "Produkt" geben. Dann können Sie ein einzelnes Ereignis zu allen Produkten anbringen, etwa so:

<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

Ihren genauen jQuery-Code nehmen Sie es auf diese besser lesbare Version reduzieren:

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'); 
    }); 
} 

Aber ich denke, dass es einen anderen, besseren Ansatz zu dem geben muss, was Sie versuchen zu tun. Ich würde mit einer generischen Klasse wie .product beginnen und eine ID für den Namen oder die Nummer jedes Produktes verwenden. Das Gleiche gilt für die Klasse selected. Dann bin ich ziemlich sicher, dass dieser Selektor verbessert werden kann, kann aber nicht wirklich mit Ihrem Code sagen.

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