Javascript 基于所选单选按钮输入显示/隐藏DIV

我正在尝试根据select单选按钮的值切换具有相同数据属性值的多个div

但我不确定下面的代码有什么问题

默认情况下，加载时始终选择第一个单选按钮，如何触发它以显示匹配值的3个div

加价：

<nav id="gift-subs-options">
    <ul>
        <li class="selected">
            <label>
                <input type="radio" name="subscription-period" value="3mths" checked />
                <span class="period">3 months</span>                        
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="6mths" />
                <span class="period">6 months</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="12mths" />
                <span class="period">12 months</span>
            </label>
        </li>
    </ul>
</nav>

<div class="prices" data-period="3mths">A 1</div>
<div class="prices" data-period="6mths">B 1</div>
<div class="prices" data-period="12mths">C 1</div>

<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 2</div>

<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 3</div>

如果您想测试，请使用小提琴：

---

你所给予的在语法上是错误的。您需要这样做：

$(".prices[data-period='" + test + "']").show();

在刷新之前，还要隐藏其他

div

s

$(".prices").hide();

完整代码：

$(document).ready(function() {
    $(".prices").hide();

    $("input[name$='subscription-period']").click(function() {
        var test = $(this).val();
        $(".prices").hide();
        $(".prices[data-period='" + test + "']").show();
    });
});

---

小提琴：你所给予的在语法上是错误的。您需要这样做：

$(".prices[data-period='" + test + "']").show();

在刷新之前，还要隐藏其他

div

s

$(".prices").hide();

完整代码：

$(document).ready(function() {
    $(".prices").hide();

    $("input[name$='subscription-period']").click(function() {
        var test = $(this).val();
        $(".prices").hide();
        $(".prices[data-period='" + test + "']").show();
    });
});

小提琴：读

阅读

使用以下内容：

$(document).ready(function() {
   $(".prices").hide();

   var defaultval=$("input[name$='subscription-period']").val();
   $(".prices[data-period='" + defaultval + "'").show();
   $("input[name$='subscription-period']").change(function() {
      $(".prices").hide();
      var test = $(this).val();
      $(".prices[data-period='" + test + "'").show();
  });
});

以下是工作演示：

使用以下内容：

$(document).ready(function() {
   $(".prices").hide();

   var defaultval=$("input[name$='subscription-period']").val();
   $(".prices[data-period='" + defaultval + "'").show();
   $("input[name$='subscription-period']").change(function() {
      $(".prices").hide();
      var test = $(this).val();
      $(".prices[data-period='" + test + "'").show();
  });
});

---

这是一个工作演示：

这似乎在firefox中不起作用，但在chrome和其他浏览器中起作用（这似乎不适用于firefox，但适用于chrome和其他浏览器。）(