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 »" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8VVZ8YWHZGNGC&custom_user_id='" />
<br />
<br />
<input type="button" name="btnSignUp" value="Sign Up
Plimus »" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296795&custom_user_id='" />
</td>
<td class="price product3">
15.00 USD/Month
<br />
<br />
<input type="button" name="btnSignUp" value="Sign Up
PayPal »" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZ7TR9A3ZHZHS&custom_user_id='" />
<br />
<br />
<input type="button" name="btnSignUp" value="Sign Up
Plimus »" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296795&custom_user_id='" />
</td>
<td class="price product4">
25.00 USD/Month
<br />
<br />
<input type="button" name="btnSignUp" value="Sign Up
PayPal »" onclick="window.location='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=W5VU287ZC2USQ&custom_user_id='" />
<br />
<br />
<input type="button" name="btnSignUp" value="Sign Up
Plimus »" onclick="window.location='https://www.plimus.com/jsp/buynow.jsp?contractId=2296805&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>