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单选按钮，并将所有价格选项显示为package2的单选按钮，但同时隐藏{{的价格选项1}}。

然后，我点击的所有价格选项都会显示属于该价格选项的所有价值。

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

Answer 1

<强> Working fiddle

尝试将所有div s（以package开头的id）隐藏到其他radio按钮，然后只显示属于所点击的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();
});

希望这有帮助。

单击单选按钮，显示/隐藏具有动态更改的ID或类的div

1 个答案: