По умолчанию заголовок и баннер должны быть скрыты, когда пользователь установил переключатель #show, контейнеры заголовка и баннера станут видимыми. В случае, если вы отметили любую другую радиокнопку, скрытие заголовка и баннера.

<main>
    <div class="container">
        <form action="/" id="form">
            <input type="radio" id="radio-1">
            <input type="radio" id="radio-2">
            <input type="radio" id="show">
        </form>
    </div>
    <div class="container">Title</div>
    <div class="container">Banner</div>
    <div class="container">Some content</div>
</main>


      var itemHide = [0, 1];
      var $form = $('#form');
      
      if ($form.length > 0) {
        hideTeaser();
        radioAction();
      }
      
      function radioAction() {
        $form.click(function () {
          if ($('#show').is(':checked')) {
            showTeaser();
          } else {
            hideTeaser();
          }
        });
      }
  
      function hideTeaser() {
        $form.parent('.container').nextAll().filter( function(index, el) {
          return $.inArray(index, itemHide) > -1;
        }).hide();
      }
      
      function showTeaser() {
        $form.parent('.container').nextAll().filter( function(index, el) {
          return $.inArray(index, itemHide) > -1;
        }).show();
      }
1
Andrew 14 Ноя 2020 в 18:20

2 ответа

Лучший ответ

Попробуйте использовать этот.

        <main>
            <div class="container">
                <form action="/" id="form">
                    <input type="radio" name="content" value="radio1">
                    <input type="radio" name="content" value="radio2">
                    <input type="radio" name="content" value="show">
                </form>
            </div>
            <div class="container">Title</div>
            <div class="container">Banner</div>
            <div class="container">Some content</div>
        </main>
    
    
    
        $(document).ready(function() {

            $('div:contains("Title")').css('display','none');
            $('div:contains("Banner")').css('display','none');

            $("input[name$='content']").click(function() {
                var test = $(this).val();
                if(test == 'show'){
                   $('div:contains("Title")').show();
                   $('div:contains("Banner")').show();
                }
                else{
                   $('div:contains("Title")').hide();
                   $('div:contains("Banner")').hide();
                }
            });
        });
0
shehan pathirathna 14 Ноя 2020 в 18:12

Посмотри на это

https://api.jquery.com/toggle/

Переключатель jQuery упрощает то, что вы пытаетесь сделать.

0
philipjohnbasile 14 Ноя 2020 в 15:24