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 到不从第一个 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();
  });
});