0

私のラジオボタン：

<input type="radio" name="radio-269" value="Purchase Only" />
<input type="radio" name="radio-269" value="Sale Only" />
<input type="radio" name="radio-269" value="Purchase and Sale" />

次に私のdiv：

<div id="sale">
SALE!
</div>

<div id="purchase">
PURCHASE!
</div>

最後に、現時点での私のJavaScript：

<script>
$("input[name='radio-269']").change(function() {
    if ($(this).val() == "Purchase and Sale") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
    if ($(this).val() == "Purchase Only" || $(this).val() == "Sale Only") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
});
</script>

次のように変更するにはどうすればよいですか。

  • ラジオ「購入のみ」が表示されている場合、div id「購入」のみが表示されます
  • ラジオ「セールのみ」が表示されている場合、div id「セール」のみが表示されます
  • ラジオ「購入と販売」の場合、div id「購入」と「販売」の両方が表示されます

これを実現するためにJavaScriptを変更する最良の方法を教えてください。

4

4 に答える 4

2

例では、ワイヤーが少し交差しているようです。これは機能するはずです：

$("input[name='radio-269']").change(function() {

   if ($(this).val() == "Purchase Only") {
      $('#purchase').removeClass("hidden");
      $('#sale').addClass("hidden");
   }
   else if ($(this).val() == "Sale Only") {
      $('#sale').removeClass("hidden");
      $('#purchase').addClass("hidden");
   }
   else if ($(this).val() == "Purchase and Sale") {
      $('#sale').removeClass("hidden");
      $('#purchase').removeClass("hidden");
   }
});​

これが動作していることを示すJSフィドルです：http：//jsfiddle.net/yYBSV/1/

于 2012-12-04T21:29:23.677 に答える
0

HTML-5 を使用data-attributesして、対応するIDを保持できます。

<input type="radio" name="radio-269" value="Purchase Only" data-id="#purchase" />
<input type="radio" name="radio-269" value="Sale Only" data-id="#sale" />
<input type="radio" name="radio-269" value="Purchase and Sale" 
                                               data-id="#purchase,#sale"  />

<div id="sale">
SALE!
</div>

<div id="purchase">
PURCHASE!
</div>

JS

$("input[name='radio-269']").change(function() {
    $('div').hide();
    var id = $(this).data('id');
    $(id).show();
});​

フィドルを確認してください </p>

于 2012-12-04T21:30:00.617 に答える
0

JavaScriptを次のように変更します。

$("input[name='radio-269']").change(function() {
    $('#sale, #purchase').removeClass("hidden");

    if ($(this).val() == "Purchase Only") {
       $('#sale').addClass("hidden");
    }
    if($(this).val() == "Sale Only") {
        $('#purchase').addClass("hidden");
    }
});

これがjsFiddleです：http：//jsfiddle.net/scaillerie/2meM5/。

于 2012-12-04T21:30:28.200 に答える
0

コードを機能させるには、if/elseステートメントを変更する必要があるようです。検出を行うためにval（）とプレーンテキストを使用しないことをお勧めしますが。html値を変更すると、コードが壊れます。（それはあなたが思うよりも頻繁に起こります）

解決策は、これに沿って何かを見る必要があります。

$("input[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
   $('#purchase').show();
   $('#sale').show();
}else if ($(this).val() == "Sale Only") {
   $('#purchase').hide();
   $('#sale').show();
}else if ($(this).val() == "Purchase Only") {
   $('#purchase').show();
   $('#sale').hide();
}
});​
于 2012-12-04T21:31:34.933 に答える