Question

我可以选择在我的某个电子商务列表/产品页面上选择产品的引擎包。链接：https://www.inflatableboats.net/avon-seasport-inflatable-boat-seasport-470-neo-2017-with-yamaha-four-stroke/。

我有一个小脚本，根据上面选择的引擎更改产品描述。我遇到的问题是我添加了其他几个选项，现在它在选择其他选项时隐藏了我的描述。这是我的脚本，因为它位于我的网站上：

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

现在，我看到了部分问题并添加了一个额外的选择器，这就产生了一个新问题。

我换了：

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

是：

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

这改变了我的问题，从隐藏我的div到不从第一个div切换回到第二个div。非常感谢任何帮助，因为我不是任何JS专家。

以下是引擎选项的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>

以下是产品说明html：

public function actionForms(){
    $model = new form11();  // <<error on this line
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        Yii::$app->session->setFlash('contactFormSubmitted');

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

Javascript隐藏我选择的div

1 个答案: