javascript - 使用 Jquery 组合功能以在一组单选按钮中显示输入字段旁边的单选按钮

Question

我有一个广播组，其中包含 n 个选项。每个单选按钮都位于一个滑块旁边，我只想在选中组中的该单选选项时才显示该滑块。

我想我可以用一个 id 识别每个单选按钮 n 次，每个带有 id 的滑块在检查时显示它，例如：

if ($('#rToggle').is(':checked')) {
        $('#pSlider1').show(); }

我只是想知道是否有更好的方法来尽可能少地使用 IF 语句。

提议的代码（带有单独的 id）：

      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" id="rToggle" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Day</div>
          <div id="pSlider1" class="layout-slider layout-slider-slider">
            <input id="Slider2" type="slider" name="day" value="2;15" />
          </div>
        </td>
      </tr>

实际代码（无 ID）：

      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Day</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider1" type="slider" name="day" value="2;15" />
          </div>
        </td>
      </tr>
      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Month</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider2" type="slider" name="month" value="2;15" />
          </div>
        </td>
      </tr>
      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Year</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider3" type="slider" name="year" value="2;15" />
          </div>
        </td>
      </tr>

这些行持续了n次......

Answer 1

is:checked 函数只会检查一次状态。您想要的是在未选中/选中时切换显示，因此您应该像这样使用更改事件：

$("input[type=radio][name=foo]").change(function() {
       $("#div").toggle();
});

Answer 2

你有几个选择。

data-sliderid在单选按钮上放置一个属性，在<div>包含滑块的 上放置一个 ID，例如：

HTML

<td>
    <div class="layout-slider layout-slider-radio">
        <input type="radio" name="periodType" data-sliderid="pSlider1" default>
    </div>
    <div class="layout-slider layout-slider-label">Day</div>
    <div id="pSlider1" class="layout-slider layout-slider-slider">
        <input id="Slider1" type="slider" name="day" value="2;15" />
    </div>
</td>

JavaScript

$('input[name="periodType"]').change(function() {
    if(this.checked) {
        $('#' + $(this).data('sliderid')).show();
    }
});

或者使用 DOM 遍历：

$('input[name="periodType"]').change(function() {
    var $sliderDiv = $(this).closest('div').siblings('.layout-slider-slider');
    if(this.checked) {
        $sliderDiv.show();
    }
});