Javascript隱藏我選擇的div

Question

我可以選擇在我的某個電子商務列表/產品頁面上選擇產品的哪個引擎包。鏈接：https://www.inflatableboats.net/avon-seasport-inflatable-boat-seasport-470-neo-2017-with-yamaha-four-stroke/。

我有一個小腳本，根據上面選擇哪個引擎來更改產品說明。我遇到的問題是，我添加了其他幾個選項，現在當選擇其他選項時，它隱藏了我的描述。這裏是我的腳本，因爲它坐落在我的網站：

$(function() { 
 
    "use strict"; 
 

 
    $(".specs div:gt(0)").hide(); 
 

 
    $(".form-field-control input").click(function() { 
 
    var clicked = $(".form-field-control input").index(this); 
 
    var descriptionToShow = $(".specs div:eq(" + clicked + ")"); 
 
    descriptionToShow.show(); 
 
    $(".specs div").not(descriptionToShow).hide(); 
 
    }); 
 
});

現在，我看到了問題的一部分，並增加了一個額外的選擇，並且創造了新的問題。

我換：

var clicked = $(".form-field-control input").index(this); 

是：

var clicked = $(".form-field-radio > .form-field-control input").index(this); 

這從躲在我的股利不是從第一個div到第二切換回改變了我的問題。任何幫助非常感謝，因爲我不是任何方式的JS專家。

下面是引擎選項HTML和它下面的下一個選項：

<div class="form-field form-field-options form-field-radio form-required" data-product-attribute="set-radio"> 
 
    <div class="form-field-title product-option-title"> 
 
    Engine Choice 
 
    <span class="required-text">(required)</span> 
 
    </div> 
 
    <div class="form-field-control"> 
 
     <label class="form-label" data-product-attribute-value="143"> 
 
     <input class="form-input form-radio" id="attribute-143" name="attribute[705]" value="143" checked="" required="" aria-required="" type="radio"> 
 
     <span class="form-label-text">Yamaha F70LA Four Stroke</span> 
 
     </label> 
 
     <label class="form-label" data-product-attribute-value="144"> 
 
     <input class="form-input form-radio" id="attribute-144" name="attribute[705]" value="144" required="" aria-required="" type="radio"> 
 
     <span class="form-label-text">Yamaha F90LB Four Stroke</span> 
 
     </label> 
 
    </div> 
 
</div> 
 

 
      
 
<div class="form-field form-field-options form-field-checkbox form-required" data-product-attribute="input-checkbox"> 
 
    <div class="form-field-title"> 
 
    Pre Delivery Inspection 
 
    <span class="required-text">(required)</span> 
 
    </div> 
 

 
    <div class="form-field-control"> 
 
    <label class="form-label "> 
 
     <input class="form-input form-checkbox" id="attribute-706" name="attribute[706]" value="116" required="" aria-required="true" type="checkbox"> 
 
     <span class="form-label-text">$600 - Standard Fee requested by manufacturers, performed on new vessels, for preparing &amp; testing the vessel on &amp; off the water for turn-key delivery. Validates warranties. REQUIRED FEE</span> 
 
    </label> 
 
    </div> 
 
</div>

這裏是產品說明HTML：

<div class="specs"> 
 
<p>The largest of the Zodiac Avon Seasport Deluxe inflatables, the 470 is the big boy. We rig these with Yamaha F90&rsquo;s or F70's, which sound like race car engines when revved. The 470 has the deep &ldquo;V&rdquo; and the stern seat is moved forward a bit to support the motor and assist with planing. This boat can be expected to reach 40-45 mph on the top end, depending on conditions. The boat has a large fuel tank of 22.5 gallons, giving you a full day of play. The 470 also has many options available from the factory like a fresh water shower and picnic table, as well as synthetic teak decking and a bathing ladder.</p> 
 
<div id="Description1"> 
 
<br /> 
 
<h3 class="specstitle">Boat Specifications</h3> 
 
<ul class="specdetails"> 
 
<li>LOA: 15'5"</li> 
 
<li>Beam: 6'9"</li> 
 
<li>Weight: 910 lbs (Boat Only)</li> 
 
<li>Capacity: 9 persons or 2083 lbs</li> 
 
<li>Max Motor: 90 hp Long</li> 
 
<li>Rec Motor: 70 hp Long</li> 
 
<li>Tube Diameter: 20"</li> 
 
<li>Air Chambers: 5</li> 
 
<li>Fuel Tank: 22.5 gals</li> 
 
<li>Fabric Type: Hypalon</li> 
 
<li>Factory Warranty: 5 years</li> 
 
</ul> 
 
<br /> 
 
<h3 class="specstitle">Standard Features</h3> 
 
<p>V-shaped fiberglass hull with built-in flaps, Anchor locker with upholstered seat, Rear locker with gas strut, 1 bow D-ring, 2 stern rings, Stainless steel bow rail, Rear boarding steps, Steering wheel + steering system + cable + glove box, Built-in fuel tank + gauge + fuel/water separator, Recess for extinguisher, Double pilot/co-pilot seat with removable upholstered seat, Passenger seats with removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, Courtesy light, Navigation lights, Battery switch + box, Automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p> 
 
<br /> 
 
<h3 class="specstitle">Motor Specifications</h3> 
 
<ul class="specdetails"> 
 
<li>Engine Type: Yamaha F70LA 4-stroke</li> 
 
<li>Horsepower: 70 hp</li> 
 
<li>Cylinders: 4 cyl</li> 
 
<li>Shaft Length: 20"</li> 
 
<li>Steering: Remote mech</li> 
 
<li>Starter: Electric</li> 
 
<li>Weight: 253 lbs</li> 
 
<li>Full Throttle Range: 5300 - 6300 rpm</li> 
 
<li>Displacement: 996cc</li> 
 
<li>Induction System: DOHC EFI</li> 
 
<li>Warranty: 3 years</li> 
 
</ul> 
 
<br /> 
 
<h3 class="specstitle">Standard Features</h3> 
 
<p>Electric start, remote mech steering, power trim &amp; tilt, aluminum propeller, easy flush system</p> 
 
<br /> 
 
<h3 class="specstitle">Standard Rigging</h3> 
 
<p>Flush mounted remote control with harness and separate keyswitch, Command Link round tach and speedo, water/fuel separator, mechanical control cables</p> 
 
</div> 
 
<div id="Description2"> 
 
<br /> 
 
<h3 class="specstitle">Boat Specifications</h3> 
 
<ul class="specdetails"> 
 
<li>LOA: 15'5"</li> 
 
<li>Beam: 6'9"</li> 
 
<li>Weight: 910 lbs (Boat Only)</li> 
 
<li>Capacity: 9 persons or 2083 lbs</li> 
 
<li>Max Motor: 90 hp Long</li> 
 
<li>Rec Motor: 70 hp Long</li> 
 
<li>Tube Diameter: 20"</li> 
 
<li>Air Chambers: 5</li> 
 
<li>Fuel Tank: 22.5 gals</li> 
 
<li>Fabric Type: Hypalon</li> 
 
<li>Factory Warranty: 5 years</li> 
 
</ul> 
 
<br /> 
 
<h3 class="specstitle">Standard Features</h3> 
 
<p>V-shaped fiberglass hull with built-in flaps, Anchor locker with upholstered seat, Rear locker with gas strut, 1 bow D-ring, 2 stern rings, Stainless steel bow rail, Rear boarding steps, Steering wheel + steering system + cable + glove box, Built-in fuel tank + gauge + fuel/water separator, Recess for extinguisher, Double pilot/co-pilot seat with removable upholstered seat, Passenger seats with removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, Courtesy light, Navigation lights, Battery switch + box, Automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p> 
 
<br /> 
 
<h3 class="specstitle">Motor Specifications</h3> 
 
<ul class="specdetails"> 
 
<li>Engine Type: Yamaha F90LB 4-stroke</li> 
 
<li>Horsepower: 90 hp</li> 
 
<li>Cylinders: 4 cyl</li> 
 
<li>Shaft Length: 20"</li> 
 
<li>Steering: Remote mech</li> 
 
<li>Starter: Electric</li> 
 
<li>Weight: 353 lbs</li> 
 
<li>Full Throttle Range: 5000 - 6000 rpm</li> 
 
<li>Displacement: 1832cc</li> 
 
<li>Induction System: DOHC EFI</li> 
 
<li>Warranty: 3 years</li> 
 
</ul> 
 
<br /> 
 
<h3 class="specstitle">Standard Features</h3> 
 
<p>Electric start, remote mech steering, power trim &amp; tilt, aluminum propeller, easy flush system</p> 
 
<br /> 
 
<h3 class="specstitle">Standard Rigging</h3> 
 
<p>Flush mounted remote control with harness and separate keyswitch, Command Link round tach and speedo, water/fuel separator, mechanical control cables</p> 
 
</div> 
 
</div>

Answer 1

我相信我解決了我自己的謎題。我改變了我的腳本，並且它正在工作。也許只要我不在頁面上使用單選按鈕來做其他事情。

$(function() { 
 
    "use strict"; 
 

 
    $(".specs div:gt(0)").hide(); 
 

 
    $(".form-radio").click(function() { 
 
    var clicked = $(".form-radio").index(this); 
 
    var descriptionToShow = $(".specs div:eq(" + clicked + ")"); 
 
    descriptionToShow.show(); 
 
    $(".specs div").not(descriptionToShow).hide(); 
 
    }); 
 
});