jquery сокращение - получить несколько селекторов, соответствующих соответствующим элементам - PullRequest
Новая
       37

jquery сокращение - получить несколько селекторов, соответствующих соответствующим элементам

0 голосов
/ 15 апреля 2020

Хотелось бы условное обозначение для этого: 

// code (works fine) - onmouseover selector1, selector2 (etc), change 'mydiv1', 'mydiv2' (etc) z-index value;
//  onmouseout, restore default z-index value

$('#selector1').hover(function () {
$('#mydiv1').css("z-index", "2")
},
function() {
$('#mydiv1').css("z-index", "");
});

$('#selector2').hover(function () {
$('#mydiv2').css("z-index", "2")
},
function() {
$('#mydiv2').css("z-index", "");
});

Из многих попыток это все, чего я мог достичь: 

$(selector1,selector2).hover(function () {
$(mydiv1,mydiv2).css("z-index", "2")
},
function() {
$(mydiv1,mydiv2).css("z-index", "");
});

(соответствует только 1-й переменной)
Я вроде понимаю, почему это не может работать, но все равно не может заставить его работать.

Как сделать так, чтобы селектор1, селектор2 соответствовали mydiv1, mydiv2 (et c) соответственно сокращенно?

1 Ответ

0 голосов
/ 15 апреля 2020

Я бы использовал атрибуты данных. Я бы также не использовал hover, я бы использовал mouseenter и mouseleave. 

// select the elements with the common class
$(".hover").on("mouseenter mouseleave", function (e) {
  // grab the selector from the hovered element
  var selector = $(this).data("toggles");
  // toggle the display of the element
  // if the element is enter, show it, else hide it.
  $(selector).toggle(e.type === 'mouseenter');
})
.x {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover" data-toggles="#div1">one</div>
<div class="hover" data-toggles=".div2">two</div>

<div id="div1" class="x">Div one</div>
<div class="div2 x">Div two</div>
...