Javascript versteckt meine ausgewählte div

Question

Ich habe eine Option zu wählen, welche Engine-Paket für ein Produkt auf einer meiner E-Commerce-Auflistung/Produkt-Seiten. Link: https://www.inflatableboats.net/avon-seasport-inflatable-boat-seasport-470-neo-2017-with-yamaha-four-stroke/.

Ich habe ein kleines Skript, das die Produktbeschreibung ändert, je nachdem welche Engine oben ausgewählt ist. Das Problem, auf das ich stoße, ist, dass ich einige andere Optionen hinzugefügt habe und jetzt meine Beschreibung versteckt, wenn die anderen Optionen ausgewählt sind. Hier ist mein Skript, wie es auf meiner Website sitzt:

$(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(); 
 
    }); 
 
});

Nun, ich Teil des Problems zu sehen und haben einen zusätzlichen Selektor und erstellt ein neues Problem hinzu.

Ich tauschte:

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

sein:

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

Dies aus seinem Versteck meines Problem änderte meine div in den zweiten nicht zurück von der ersten div wechseln. Jede Hilfe wird sehr geschätzt, da ich kein JS-Experte bin. Hier

ist der HTML-Code für den Motor-Option und die nächste Option darunter:

<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>

Und hier ist die Produktbeschreibung 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

Ich glaube, ich habe mein eigenes Rätsel gelöst. Ich habe mein Skript so geändert und es funktioniert. Wahrscheinlich nur solange ich keine Radioknöpfe für irgendetwas anderes auf der Seite benutze.

$(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(); 
 
    }); 
 
});