javascript - 单击单选按钮时，显示/隐藏具有动态变化的 ID 或类的 div

Question

<div class="">
    @foreach($result->package as $package) //listing all packages from DB using Laravel's Blade template
        <input id="id_radio{{$package->id}}" type="radio" value="{{$package->id}}" name="radio"
        >{{$package->name}} <br>
        <div class="" id="package{{$package->id}}">
            @foreach($package->price_option as $price_option)
                Price Option: <input type="radio" value="{{$price_option->id}}"
                                     name="radio">{{$price_option->id}}  <br>
                <div class="">
                    @foreach($price_option->values as $value)
                        Values: {{$value->value}} <br>
                    @endforeach
                </div>
            @endforeach
        </div>
    @endforeach
</div>

页面来源:

<div class="">
  <input id="id_radio22" type="radio" value="22" name="radio"
    >Package 1 <br>
  <div class="" id="package22">
      Price Option: <input type="radio" value="75"
                           name="radio">75  <br>
      <div class="">
          Values: Dummy text <br>
          Values: Dummy text 2 <br>
      </div>
      Price Option: <input type="radio" value="78"
                           name="radio">78  <br>
      <div class="">
          Values: Dummy text <br>
          Values: Dummy text 2 <br>
      </div>
  </div>
  <input id="id_radio23" type="radio" value="23" name="radio"
  >Package 2 <br>
  <div class="" id="package23">
      Price Option: <input type="radio" value="76"
                           name="radio">76  <br>
      <div class="">
          Values: a <br>
           Values: b <br>
          Values: c <br>
      </div>
   </div>
</div>

我需要的是在我单击时将所有价格选项显示为单选按钮，例如，包裹 1 单选按钮，并将所有价格选项显示为包裹 2 的单选按钮，但同时隐藏价格选项 包 1。

然后对于我单击以显示属于该价格选项的所有值的所有价格选项。

目前没有任何 CSS 或 JQuery/JavaScript 代码

Answer 1

Working fiddle .

尝试隐藏属于其他 radio 按钮的所有 div(id 以 package 开头)然后只显示 div属于被点击的那个:

$('div[id^="package"]').hide();

$('body').on('click','input[id^="id_radio"]',function(){
    $('div[id^="package"]').hide();
    $('#package'+$(this).val()).show();
});

$('div[id^="price_option_div"]').hide();

$('body').on('click','.price_option',function(){
    $('div[id^="price_option_div_"]').hide();
    $("#price_option_div_"+$(this).val()).show();
});

希望这对您有所帮助。