1

допустим, есть объекты

<div id="div1"></div>
<div id="div2"></div>

Общее действие над ними можно совершить так:

$('#div1,#div2').toggleClass('hidden');

Но если мне надо объявить их как объекты js

var $d1 = $('#div1'), $d2 = $('#div2');

то как тогда их объединить?

2 ответа 2

2

$("button").click(function() {
  var $d1 = $('#div1'),
    $d2 = $('#div2');
  var $ds = $([$d1, $d2]);
  console.log($ds.length);
  $ds.toggleClass('hidden');
});
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Hide</button>
<div id="div1">One</div>
<div id="div2">Two</div>

2
  • $([$d1, $d2]) - вот этого нигде не нашел, а сам не додумался! спасибо огромное!
    – Alex
    21 мая 2019 в 1:55
  • @Alex На здоровье. Успехов! Знак "галочка" - слева от ответа.
    – user176262
    21 мая 2019 в 2:00
0

Вы путаете объекты, элементы и переменные...

Это HTML - элементы:

<div id="div1"></div>
<div id="div2"></div>

JS-объекты выполняют важную роль в языке и выглядят примерно так:

var object = {'bubu': 15, 'mama': 145, 'boo': 'kuku'}

Элементы объектов достаются так:

object.bubu; //Такая запись будет равна 15
object.mama;  // = 145
object.boo;   // = 'kuku'

А этих называют "переменные" (от слова variable):

var $d1 = $('#div1'), $d2 = $('#div2');

Если надо выполнять одинаковое действие с несколькими элементами, разумнее через общий класс:

$('.bubu').on('click', function(){
  $('.bubu').toggleClass('hidden');
});
.hidden {display: none;}

.bubu {width: 100px; height: 100px; border: 2px solid orange; cursor: pointer; user-select: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bubu" id="div1">booo</div>
<div class="bubu hidden" id="div2">mooo</div>

Но в вашем случае можно было обойтись и чистым CSS:

.bubu, .kuku {width: 100px; height: 100px; border: 2px solid orange; cursor: pointer; user-select: none;}

/* Изначально второй блок скрыт */
.kuku {display: none;}

/* Все они находятся внутри label, поэтому любой клик переключает чекбокс */

/* А когда он включен - записываются другие стили */
.moo:checked ~ .kuku {display: block;}
.moo:checked ~ .bubu {display: none;}

/* Символ ~ означает "найти .bubu, который находится где-то ниже в коде от отмеченного чекбокса" */

/* Дописать 

.moo {display: none;}

Чтобы скрыть чекбокс */
<label>
  <input type="checkbox" class="moo">
  <div class="bubu" id="div1">booo</div>
  <div class="kuku" id="div2">mooo</div>
</label>

Есть еще общий селектор в CSS... работает и в JS: $("div[id^='div']") — Такая штука пройдется по всей странице и найдет все id элементов div, которые начинаются со слова "div". Но его редко используют, как минимум потому что потом можно забыть о нем, и добавить еще id на странице, начинающиеся этим словом.

1
  • var $d1 = $('#div1'), $d2 = $('#div2'); - да, это переменные, но в них целиком объекты DOM, а это присвоение мне нужно не только для того, чтобы менять их внешний вид, но и для изменения свойств, содержания, добавления/удаления классов, и т.д., так что, css тут мимо ))
    – Alex
    21 мая 2019 в 1:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.