Question

我的单选按钮：

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

然后我的divs：

<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“购买”
当显示收音机“仅限促销”时，只有“销售”字样
当收音机“购买和销售”都标记为“购买”和 “销售”是可见的

请有人向我展示修改我的javascript以实现此目的的最佳方法吗？

Answer 1

在你的例子中，看起来你的电线有点交叉了。这应该有效：

$("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/

Answer 2

您可以使用 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();
});

<强> Check Fiddle

Answer 3

将您的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/。

Answer 4

好像你只需要修改你的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();
}
});

根据单选按钮显示div

4 个答案: