0

n 個のオプションを含むradio groupがあります。各ラジオ ボタンは、グループ内のそのラジオ オプションがオンになっている場合にのみ表示するスライダーの横にあります。

各ラジオボタンを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 回続きます...

4

2 に答える 2

0

いくつかのオプションがあります。

data-slideridラジオ ボタンに属性を配置し、スライダを含む ID を配置します。<div>次に例を示します。

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();
    }
});
于 2012-06-26T11:00:39.763 に答える
0

is:checked 関数は、ステータスを 1 回だけチェックします。あなたが望むのは、チェックされていない/チェックされているときはいつでも表示を切り替えることです。したがって、次のように変更イベントを使用する必要があります。

$("input[type=radio][name=foo]").change(function() {
       $("#div").toggle();
});
于 2012-06-26T10:48:07.547 に答える