Как в jQuery объединить несколько объектов?

28 декабря 2020, 17:40

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

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

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

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

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

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

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

Answer 1

$("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>

Answer 2

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

Это 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 на странице, начинающиеся этим словом.