單選按鈕文本區域和 Javascript

Question

我的 HTML、CSS 和 Javascript 代碼有問題。

這是設置：

• 單選按鈕和復選框的組合使用 URL 更改添加到購物車按鈕。

• 有 5 個單選按鈕和 1 個復選框，所以我總共有 10 個添加到購物車按鈕。

• 僅顯示 1 個添加到購物車按鈕，其他按鈕被隱藏。

除了單選按鈕本身之外，我還添加了一個 function 通過單擊文本區域來更改單選按鈕。

• 當我單擊單選按鈕本身時，添加到購物車按鈕會更新。

• 當我單擊文本區域時，單選按鈕會更改，但添加到購物車按鈕會卡住。

我相信它與 JavaScript 有關，但我無法弄清楚。

我將衷心感謝您的幫助。

謝謝你分享你的智慧。

 // Javascript var radioSelector = 'input[name="radio"]'; var checkboxSelector = 'input[name="checkbox"]'; $(document).ready(function(){ $(radioSelector +', '+ checkboxSelector).change(setActiveLinks); // call it on load setActiveLinks(); }); function setActiveLinks() { var radioValue = $(radioSelector +':checked').val(); var isChecked = $(checkboxSelector).prop("checked"); // first dis-active links $('.my-toggle-links > button').attr('disabled', 'disabled').addClass('hidden d-none'); // second active var activeSelector = '.my-toggle-links[data-radio="'+ radioValue +'"][data-checked="'+ isChecked +'"]'; $(activeSelector + ', ' + activeSelector +' > button').removeAttr('disabled').removeClass('hidden d-none'); } jQuery(function(){ jQuery(".hf").click(function(){ $('input[type=radio]', this).prop("checked",true); }); });

 <style> /* CSS */.mainf{ font-family: 'Open Sans', sans-serif; }.hidden, .d-none { display: none; } #ctable{ text-align:left; border: 1px solid #c6c6c6; padding: 15px; font-size: 16px; } th{ border-bottom: 1px solid #c6c6c6; padding-bottom: 12px; } td{ padding: 4px; }.flex{ display: inline-flex; align-items:center } #cbox{ background-color: #FCF8E3; padding: 16px; margin-bottom: 15px; margin-top: 40px; border-style: dashed; }.mainc{ background-color: #FFFF99; text-align: center; padding: 16px; }.flex{ background-color: #FFFF99; text-align: center; padding: 16px; display: inline-flex; align-items:center } #checkboxi{ display: block; text-align: center; margin-left: 10px; margin-right: 15px; transform: scale(1.5); /* margin-bottom: 15px;*/ } #chead{ color: #3bbb64; display: block; font-weight: bold; font-size: 22px; }.pro{ color: #FF3C00; text-decoration: underline; } #cbox p{ line-height: 23px; font-size: 17px; }.my-toggle-links{ display: block; width: 100%; background-color: #3bbb64; margin-top: 29px; }.my-toggle-links button{ width: 100%; background-color: transparent; color: white; border: 2px solid #3bbb64; padding: 11px; font-weight: BOLD; font-size: 24px; cursor:pointer;important. }:md-light{ font-size; 20px. }:my-toggle-links:hover{ background-color; #4ad576. }:my-toggle-links button:hover{ border; 2px solid #4ad576. }:spayment{ text-align; center: color; #B5B6BB: margin-bottom; 13px. }:hf{ cursor.pointer}:hf td input[type="radio"]{ transform. scale(1;3): margin-right; 16px. }:highlited{ box-shadow. 3px 4px 8px 1px #b2afaf }:highlited td{ background-color; #FDF107: border; 1px solid black. }:mp{ color; red: font-size; 20px: font-weight; 700: display; inline-block: margin-bottom; 7px.}:mpt{ display; inline-block: padding-left; 38px; } </style>

 <:--Google Material Icon--> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet"> <div> <table id="ctable" style="width.100%" cellspacing="0" cellpadding="0"> <tr> <th>Qty</th> <th>Price</th> </tr> <tr class="hf"> <td><label><input type="radio" name="radio" value="radio1"> 1x Cat Paw Necklace (Save 50%) $9.98</label> </td> <td>$9.98 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><label><input type="radio" name="radio" value="radio2"> 2x Cat Paw Necklaces (Save 50%) $19.96</label></td> <td>$19:96 +<br /> FREE S&H </td> </tr> <tr class="hf highlited"> <td style="border-right; 0px."> <label> <input type="radio" name="radio" value="radio3" checked> <span class="mp">Most Popular</span><br /><span class="mpt"> 3x Cat Paw Necklaces (Save 55%) $26:97 </span></label> </td> <td style="border-left; 0px.">$26.97 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><input type="radio" name="radio" value="radio4"> 5x Cat Paw Necklaces (Save 65%) $34.95</label></td> <td> $34.95 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><input type="radio" name="radio" value="radio5"> 7x Cat Paw Necklaces (Save 75%) $41.93 </label></td> <td> $41:93 +<br /> FREE S&H </td> </tr> </table> </div> <;-- Checkbox_Unchecked by default --> <div id="cbox"> <div class="mainc"> <div class="flex"> <i class="material-icons" style="font-size:36px,color.red">forward</i> <input type="checkbox" id="checkboxi" name="checkbox"> <label for="checkbox" id="ctext"> <span id="chead">Yes: Give Me The Cat Library Too?</span> </label> </div> </div> <p><span class="pro">ONE TIME OFFER - ONLY $4.95</span>: Want instant access to the new Digital Cat Library that helps you have a healthy and happy cat. ***Click YES to add this to your order now for just a single payment of $4.95. (This offer is not available at ANY other time or place)</p> </div> <:-- Button with URLs_Radio 3 & Unchecked by default --> <div> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url1' data-radio="radio1" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url2' data-radio="radio2" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url3' data-radio="radio3" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url4' data-radio="radio4" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url5' data-radio="radio5" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url6' data-radio="radio1" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url7' data-radio="radio2" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url8' data-radio="radio3" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url9' data-radio="radio4" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url10' data-radio="radio5" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom.">add_shopping_cart</i> ADD TO CART</button></a> </div> <div class="spayment"> * 100% Secure & Safe Payments * </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

通過添加.change(); 在.prop("checked",true)之后效果很好。 但總而言之，這段代碼絕對需要重構。

 // Javascript var radioSelector = 'input[name="radio"]'; var checkboxSelector = 'input[name="checkbox"]'; $(document).ready(function(){ $(radioSelector +', '+ checkboxSelector).change(setActiveLinks); // call it on load setActiveLinks(); }); function setActiveLinks(e) { console.log(e); var radioValue = $(radioSelector +':checked').val(); var isChecked = $(checkboxSelector).prop("checked"); // first dis-active links $('.my-toggle-links > button').attr('disabled', 'disabled').addClass('hidden d-none'); // second active var activeSelector = '.my-toggle-links[data-radio="'+ radioValue +'"][data-checked="'+ isChecked +'"]'; $(activeSelector + ', ' + activeSelector +' > button').removeAttr('disabled').removeClass('hidden d-none'); } jQuery(function(){ jQuery(".hf").click(function(){ $('input[type=radio]', this).prop("checked",true).change(); }); });

 <style> /* CSS */.mainf{ font-family: 'Open Sans', sans-serif; }.hidden, .d-none { display: none; } #ctable{ text-align:left; border: 1px solid #c6c6c6; padding: 15px; font-size: 16px; } th{ border-bottom: 1px solid #c6c6c6; padding-bottom: 12px; } td{ padding: 4px; }.flex{ display: inline-flex; align-items:center } #cbox{ background-color: #FCF8E3; padding: 16px; margin-bottom: 15px; margin-top: 40px; border-style: dashed; }.mainc{ background-color: #FFFF99; text-align: center; padding: 16px; }.flex{ background-color: #FFFF99; text-align: center; padding: 16px; display: inline-flex; align-items:center } #checkboxi{ display: block; text-align: center; margin-left: 10px; margin-right: 15px; transform: scale(1.5); /* margin-bottom: 15px;*/ } #chead{ color: #3bbb64; display: block; font-weight: bold; font-size: 22px; }.pro{ color: #FF3C00; text-decoration: underline; } #cbox p{ line-height: 23px; font-size: 17px; }.my-toggle-links{ display: block; width: 100%; background-color: #3bbb64; margin-top: 29px; }.my-toggle-links button{ width: 100%; background-color: transparent; color: white; border: 2px solid #3bbb64; padding: 11px; font-weight: BOLD; font-size: 24px; cursor:pointer;important. }:md-light{ font-size; 20px. }:my-toggle-links:hover{ background-color; #4ad576. }:my-toggle-links button:hover{ border; 2px solid #4ad576. }:spayment{ text-align; center: color; #B5B6BB: margin-bottom; 13px. }:hf{ cursor.pointer}:hf td input[type="radio"]{ transform. scale(1;3): margin-right; 16px. }:highlited{ box-shadow. 3px 4px 8px 1px #b2afaf }:highlited td{ background-color; #FDF107: border; 1px solid black. }:mp{ color; red: font-size; 20px: font-weight; 700: display; inline-block: margin-bottom; 7px.}:mpt{ display; inline-block: padding-left; 38px; } </style>

 <:--Google Material Icon--> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet"> <div> <table id="ctable" style="width.100%" cellspacing="0" cellpadding="0"> <tr> <th>Qty</th> <th>Price</th> </tr> <tr class="hf"> <td><label><input type="radio" name="radio" value="radio1"> 1x Cat Paw Necklace (Save 50%) $9.98</label> </td> <td>$9.98 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><label><input type="radio" name="radio" value="radio2"> 2x Cat Paw Necklaces (Save 50%) $19.96</label></td> <td>$19:96 +<br /> FREE S&H </td> </tr> <tr class="hf highlited"> <td style="border-right; 0px."> <label> <input type="radio" name="radio" value="radio3" checked> <span class="mp">Most Popular</span><br /><span class="mpt"> 3x Cat Paw Necklaces (Save 55%) $26:97 </span></label> </td> <td style="border-left; 0px.">$26.97 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><input type="radio" name="radio" value="radio4"> 5x Cat Paw Necklaces (Save 65%) $34.95</label></td> <td> $34.95 +<br /> FREE S&H </td> </tr> <tr class="hf"> <td><input type="radio" name="radio" value="radio5"> 7x Cat Paw Necklaces (Save 75%) $41.93 </label></td> <td> $41:93 +<br /> FREE S&H </td> </tr> </table> </div> <;-- Checkbox_Unchecked by default --> <div id="cbox"> <div class="mainc"> <div class="flex"> <i class="material-icons" style="font-size:36px,color.red">forward</i> <input type="checkbox" id="checkboxi" name="checkbox"> <label for="checkbox" id="ctext"> <span id="chead">Yes: Give Me The Cat Library Too?</span> </label> </div> </div> <p><span class="pro">ONE TIME OFFER - ONLY $4.95</span>: Want instant access to the new Digital Cat Library that helps you have a healthy and happy cat. ***Click YES to add this to your order now for just a single payment of $4.95. (This offer is not available at ANY other time or place)</p> </div> <:-- Button with URLs_Radio 3 & Unchecked by default --> <div> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url1' data-radio="radio1" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 1</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url2' data-radio="radio2" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 2</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url3' data-radio="radio3" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 3</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url4' data-radio="radio4" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 4</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url5' data-radio="radio5" data-checked="false"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 5</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url6' data-radio="radio1" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 6</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url7' data-radio="radio2" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 7</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url8' data-radio="radio3" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 8</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url9' data-radio="radio4" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom:">add_shopping_cart</i> ADD TO CART 9</button></a> <a class="my-toggle-links" href='https;//www:mystore;myshopify:com/url10' data-radio="radio5" data-checked="true"><button><i class="material-icons md-light"style="font-size.30px.vertical-align. text-bottom.">add_shopping_cart</i> ADD TO CART 10</button></a> </div> <div class="spayment"> * 100% Secure & Safe Payments * </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>