jquery速记-使多个选择器匹配各自的div

Question

想要这种简写方式：

// 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 () {
$(z1,z2).css("z-index", "2")
},
function() {
$(z1,z2).css("z-index", "");
});

（仅匹配第一个变量）我有点理解为什么这不起作用，但无论如何也无法使其起作用。

如何使速记器2，速记器3分别以速记方式匹配mydiv2，mydiv3等？

Answer 1

我不清楚selector 1和2与myDiv 1和2的区别，但也许这个例子可以运行吗？ （将鼠标指针移动到绿色和黄色div之间）

$('div[id^=myDiv]').hover(function () {
  $(this).css("z-index", "2")
},
function() {
  $(this).css("z-index", "");
});

#myDiv1 {
  background-color: green;
  display: inline-block;
  height: 100px;
  position: relative;
  width: 100px;
}

#myDiv2 {
  background-color: yellow;
  display: inline-block;
  height: 50px;
  margin-left: -50px;
  position: relative;
  width: 100px;
}

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

<div id="myDiv1">left div</div>
<div id="myDiv2">right div</div>

Answer 2

您可以像这样在jQuery中有多个选择器（使用颜色而不是z-index使其可见）：

$("#selector1, #selector2").hover(
  () => $("#mydiv1, #mydiv2").css("background-color", "rgba(0,0,255,0.1)"),
  () => $("#mydiv1, #mydiv2").css("background-color", "rgba(255,0,0,0.1)")
);

main {
  display: flex;
  justify-content: center;
}

.box {
  padding: 0.5em 1em;
  margin: 1em 0.5em;
}

.selector {
  background: rgba(0, 255, 0, 0.1);
  cursor: pointer;
}

.mydiv {
  background: rgba(255, 0, 0, 0.1);
  transition: all 150ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div id="selector1" class="selector box">sel1</div>
  <div id="selector2" class="selector box">sel2</div>
  <div id="mydiv1" class="mydiv box">mydiv1</div>
  <div id="mydiv2" class="mydiv box">mydiv2</div>
</main>

或：

const s1 = $("#selector1");
const s2 = $("#selector2");
const div1 = $("#mydiv1");
const div2 = $("#mydiv2");

s1.add(s2).hover(
  () => div1.add(div2).css("background-color", "rgba(0,0,255,0.1)"),
  () => div1.add(div2).css("background-color", "rgba(255,0,0,0.1)")
);

main {
  display: flex;
  justify-content: center;
}

.box {
  padding: 0.5em 1em;
  margin: 1em 0.5em;
}

.selector {
  background: rgba(0, 255, 0, 0.1);
  cursor: pointer;
}

.mydiv {
  background: rgba(255, 0, 0, 0.1);
  transition: all 150ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div id="selector1" class="selector box">sel1</div>
  <div id="selector2" class="selector box">sel2</div>
  <div id="mydiv1" class="mydiv box">mydiv1</div>
  <div id="mydiv2" class="mydiv box">mydiv2</div>
</main>

或：

const s1 = $("#selector1");
const s2 = $("#selector2");
const div1 = $("#mydiv1");
const div2 = $("#mydiv2");

const selectors = s1.add(s2);
const mydivs = div1.add(div2);

selectors.hover(
  () => mydivs.css("background-color", "rgba(0,0,255,0.1)"),
  () => mydivs.css("background-color", "rgba(255,0,0,0.1)")
);

main {
  display: flex;
  justify-content: center;
}

.box {
  padding: 0.5em 1em;
  margin: 1em 0.5em;
}

.selector {
  background: rgba(0, 255, 0, 0.1);
  cursor: pointer;
}

.mydiv {
  background: rgba(255, 0, 0, 0.1);
  transition: all 150ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div id="selector1" class="selector box">sel1</div>
  <div id="selector2" class="selector box">sel2</div>
  <div id="mydiv1" class="mydiv box">mydiv1</div>
  <div id="mydiv2" class="mydiv box">mydiv2</div>
</main>

或：

const selectors = $("#selector1, #selector2");
const mydivs = $("#mydiv1, #mydiv2");

selectors.hover(
  () => mydivs.css("background-color", "rgba(0,0,255,0.1)"),
  () => mydivs.css("background-color", "rgba(255,0,0,0.1)")
);

main {
  display: flex;
  justify-content: center;
}

.box {
  padding: 0.5em 1em;
  margin: 1em 0.5em;
}

.selector {
  background: rgba(0, 255, 0, 0.1);
  cursor: pointer;
}

.mydiv {
  background: rgba(255, 0, 0, 0.1);
  transition: all 150ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div id="selector1" class="selector box">sel1</div>
  <div id="selector2" class="selector box">sel2</div>
  <div id="mydiv1" class="mydiv box">mydiv1</div>
  <div id="mydiv2" class="mydiv box">mydiv2</div>
</main>

但最容易使用的类：

const selectors = $(".selector");
const mydivs = $(".mydiv");

selectors.hover(
  () => mydivs.css("background-color", "rgba(0,0,255,0.1)"),
  () => mydivs.css("background-color", "rgba(255,0,0,0.1)")
);

main {
  display: flex;
  justify-content: center;
}

.box {
  padding: 0.5em 1em;
  margin: 1em 0.5em;
}

.selector {
  background: rgba(0, 255, 0, 0.1);
  cursor: pointer;
}

.mydiv {
  background: rgba(255, 0, 0, 0.1);
  transition: all 150ms linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div id="selector1" class="selector box">sel1</div>
  <div id="selector2" class="selector box">sel2</div>
  <div id="mydiv1" class="mydiv box">mydiv1</div>
  <div id="mydiv2" class="mydiv box">mydiv2</div>
</main>