Можем ли мы использовать одну и ту же кнопку, чтобы скрыть / показать несколько элементов - PullRequest
Новая
       15

Можем ли мы использовать одну и ту же кнопку, чтобы скрыть / показать несколько элементов

0 голосов
/ 30 декабря 2018

У меня есть 3 кнопки тега привязки и 6 делений, я хочу назначить каждому из них по 2 деления, и при нажатии оба назначенных деления должны отображаться / скрываться соответственно.

Мне удалось скрыть / показатьпервые 3 деления с использованием приведенного ниже кода, однако для следующих 3 делений (раздел изображения) мой код не работает

html: 

//button section
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

js: 

function show(elementId) { 
    document.getElementById("id1").style.display="none";
    document.getElementById("id2").style.display="none";
    document.getElementById("id3").style.display="none";
    document.getElementById(elementId).style.display="block";
}

Есть ли альтернативный способ показать / скрыть оба элемента div при нажатии на назначенную кнопку?

Ответы [ 4 ]

0 голосов
/ 30 декабря 2018

Поскольку document.getElementById() даст вам первый соответствующий элемент, то есть вы будете изменять только стиль первого соответствующего элемента, а не второй.

Вы можете рассмотреть возможность изменения атрибута id с помощью класса,поскольку атрибут id должен быть уникальным. 

// remove the id attribute if it's not used in other places
// class-replacement-for-id1 here is just a placeholder, it can be anything you want
<div class="mx-2 class-replacement-for-id1" id="id1">

<div class="mx-2 class-replacement-for-id1" id="id1">
    <img class="img-fluid" src="assets/images/shadow-img.png"/>
</div>

А затем используйте document.querySelectorAll('.class-replacement-for-id1') для выбора элементов 

function toggleDisplay(className) { 
    var elements = document.querySelectorAll('.' + className);

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display === 'none' ? 'block' : 'none';
    }
}
0 голосов
/ 30 декабря 2018

вы можете использовать .querySelectorAll метод и скрыть все эти элементы 

function show(elementId) { 
    [].slice.call(document.querySelectorAll(".myBlock"),0).map(e=>e.style.display="none")
    document.getElementById(elementId).style.display="block";
}
//button section
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me1" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me2" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me3" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2 myBlock" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>
0 голосов
/ 30 декабря 2018

Вы используете один и тот же id дважды.Это не разрешеноЯ изменил ваш HTML, чтобы исправить эту проблему.Надеюсь, это поможет. 

function show(elementId) { 
   let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));
   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));
   divs.forEach(d=>{d.style.display="none"})
   imgs.forEach(i=>{i.style.display="none"})
   document.getElementById("d"+elementId).style.display="block";
   document.getElementById("i"+elementId).style.display="block";
    }
<div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget1</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget2</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget3</a></div>
   </div>
<!--1st 3 divs-->
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="did1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

<!--next 3 divs(image section)-->
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="iid1"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>
      <div class="mx-2" id="iid2" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>
      <div class="mx-2" id="iid3" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>
   </div>
</div>
0 голосов
/ 30 декабря 2018

Вы должны посмотреть на включение jQuery в ваш проект.jQuery уже предоставляет эту функцию.

Добавьте этот код в свой HTML-тег: 

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

И тогда вы сможете использовать следующие функции в этом случае - функцию переключения, где вы можетеклассы переключения указанных вами элементов: 

$( "#id1, #id2, #id3" ).toggle(
  function() {
    $( this ).addClass( "show" );
  }, function() {
    $( this ).removeClass( "hide" );
  }
);

См. документацию jquery для событий переключения и нажатия:

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

https://api.jquery.com/click/

и, в общем, документация jQuery для поиска других похожих функций:

https://api.jquery.com

Если вы добавите загрузчик в ваш проект, классы show и hide уже будут включены в ваш проект ... и предоставятфункциональность, которую вы хотите.

Надеюсь, это поможет.

...