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“销售”可见
  • 当电台“Purchase and Sale”时，div id“purchase”和“sale”都可见

有人可以告诉我修改我的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 Fiddle：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 回答