Переключить видимость двух div одновременно

Question

Переключить видимость двух div одновременно

0

Я использую следующий код для переключения видимости области div:

 <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
  e.style.display = 'none';
else
  e.style.display = 'block';
}
 </script>

Чтобы переключить его, я использую:

onclick="toggle_visibility('id_of_element_to_toggle');"

Как я могу переключить видимость двух divs сразу? Я хочу, чтобы они переключались. Чем проще метод, тем лучше.

БОЛЬШЕ ИНФОРМАЦИИ:

Мне не повезло. Вот мой код:

<a href="#id" onclick="toggle_visibility(['id', 'callgraph']);">Change Payment Method</a>

<script type="text/javascript">
   function toggle_visibility(id, callgraph) {  
   var e = document.getElementById(id);
   var e2 = document.getElementById(callgraph);
   if(e.style.display == 'block')                   
      e.style.display = 'none';             
      e2.style.display = 'block';
   else
      e.style.display = 'block';            
      e2.style.display = 'none';                    
}                                            
</script>

Arringar1 03 окт. 2013, в 19:14

Источник

0

какие 2 деления? Вы передаете 1 идентификатор Вы можете передать массив идентификаторов в функцию, если это то, что вы имеете в виду
Dvir 03 окт. 2013, в 16:48
0

1) Попробуйте использовать JS-библиотеку, такую как JQuery. 2) Избегайте использования атрибутов onclick т. Д., А не связывайте их с событием двусторонним образом (например, с помощью jQuery('div.collapsible').click(function(){}) )
deed02392 03 окт. 2013, в 16:48
0

Я попытался передать массив идентификаторов, например, так: onclick = "toggle_visibility ('first-id'); toggle_visibility ('second-id')", это не сработало.
Arringar1 03 окт. 2013, в 16:50
1

@ deed02392: Почему jQuery для этой задачи, когда vanilla JS может это сделать?
Harry 03 окт. 2013, в 16:50
0

@ Гарри просто предоставил в качестве примера, надеюсь, что пользователь рассмотрит преимущества других приложений
deed02392 03 окт. 2013, в 16:51
0

stackoverflow.com/questions/4936715/...
Ciro Santilli 新疆改造中心996ICU六四事件 27 окт. 2014, в 14:21

Показать ещё 4 комментария

Теги:

javascript

html

css

4 ответа

Ещё вопросы

какие 2 деления? Вы передаете 1 идентификатор Вы можете передать массив идентификаторов в функцию, если это то, что вы имеете в виду
1) Попробуйте использовать JS-библиотеку, такую как JQuery. 2) Избегайте использования атрибутов onclick т. Д., А не связывайте их с событием двусторонним образом (например, с помощью jQuery('div.collapsible').click(function(){}) )
Я попытался передать массив идентификаторов, например, так: onclick = "toggle_visibility ('first-id'); toggle_visibility ('second-id')", это не сработало.
@ deed02392: Почему jQuery для этой задачи, когда vanilla JS может это сделать?
@ Гарри просто предоставил в качестве примера, надеюсь, что пользователь рассмотрит преимущества других приложений

Gabriele Petrioli · Answer 1 · 2013-10-03T15-38-00.000Z

Самое грубое решение - запустить его дважды.. (один раз для каждого id)

onclick="toggle_visibility('first-id');toggle_visibility('second-id')"

Другим было бы передать массив значений id

<script type="text/javascript">
function toggle_visibility(ids) {
    for(i=0,len = ids.length; i < len; i++) {
        var e = document.getElementById(ids[i]);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
}
 </script>

И назовите это так

onclick="toggle_visibility(['first-id','second-id']);"

Я попробовал этот метод, он не работал.
@ Arringar1 это должно работать. Ваши элементы div вложены друг в друга? Пожалуйста, оставьте свой HTML, а также

Mejri Yassine · Answer 2 · 2013-10-03T15-09-00.000Z

не можете ли вы использовать одну и ту же функцию, но добавить другой идентификатор?

     <script type="text/javascript">
    function toggle_visibility(id1,id2) {
    var e = document.getElementById(id1);
    var f = document.getElementById(id2);
    if(e.style.display == 'block'&& f.style.display == 'block')
{
      e.style.display = 'none';
      f.style.display = 'none';
}
    else
{
      e.style.display = 'block';
      f.style.display = 'block';
}
    }
     </script>

тогда

onclick="toggle_visibility('id_of_element_to_toggle1','id2');"

InfectedPacket · Answer 3 · 2013-10-03T14-34-00.000Z

Не уверен, что это именно то, что вы хотите, но я бы предложил вам просто добавить аргумент к вашей функции, чтобы включить другой элемент DIV, то есть:

<script type="text/javascript">
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);

if(e1.style.display == 'block')
  e1.style.display = 'none';
  e2.style.display = 'none';
else
  e1.style.display = 'block';
  e2.style.display = 'block';
}
 </script>

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

David · Answer 4 · 2013-10-03T14-29-00.000Z

Под "заставить их переключаться" вы подразумеваете, что скрытие одного всегда показывает другое?

Для начала вам понадобится ссылка на оба элемента при вызове функции:

onclick="toggle_visibility('id_of_element_to_toggle', 'id_of_other_element');"

Тогда в вашей функции это только вопрос установки обоих из них:

function toggle_visibility(id1, id2) {
    var e1 = document.getElementById(id1);
    var e2 = document.getElementById(id2);
    if(e1.style.display == 'block')
        e1.style.display = 'none';
        e2.style.display = 'block';
    else
        e1.style.display = 'block';
        e2.style.display = 'none';
}

Это не ужасно изящно, но должно делать работу четко и эффективно. (С потенциальной добавленной выгодой, которая, если каким-либо другим способом эти два элемента получат "не синхронизированный", то это приведет к их повторной синхронизации. Или потенциальная добавленная ошибка одной и той же функциональности, в зависимости от того, как вы смотрите на нее, я полагаю.)