Question

假设我有如下变量。我在许多不同的地方使用此变量。

  var bed2 = $('.bed2');
var labelTwo = $('.label-two');

现在，假设我需要按以下方式使用

$('.bed2, .label-two').css({'background-color': 'yellow'});

当然，我可以做到以下

bed2.css('background-color', 'yellow');
labelTwo.css('background-color', 'yellow');

但是，感觉就像在上面写这两行一样让人讨厌。可以将这两行合并为类似的内容吗

bed2,labelTwo.css('background-color', 'yellow');

我的问题是关于将变量bed2，labelTwo组合成一行。

Answer 1

您快到了。将,更改为:

当前为：

$('.bed2, .label-two').css('background-color', 'yellow');

更改为：

$('.bed2, .label-two').css({'background-color': 'yellow'});

此处示例：

$('.bed2, .label-two').css({'background-color': 'yellow'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bed2">
  Hello
</div>

<div class="label-two">
  World
</div>

Answer 2

是的，这可能有点棘手。 jQuery可以采用元素数组。 .get()将选择器找到的元素作为数组返回。连接阵列，然后就可以了。

添加了一个使用SLaks答案的示例。

var bed2 = $('.bed2');
var labelTwo = $('.label-two');

bed2.css('background-color', 'yellow');
labelTwo.css('background-color', 'yellow');

$('#theButton').click(function() {
  $(bed2.get().concat(labelTwo.get())).css('background-color', 'green');
});

$('#theButton2').click(function() {
  bed2.add(labelTwo).css('background-color', 'blue');
});

.bed2, .label-two {
  height: 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bed2"></div>
<div class="label-two"></div>
<button id="theButton">Click green</button>
<button id="theButton2">Click blue</button>

Answer 3

如果我正确理解，您想重用bed2和labelTwo变量，就像您可以使用它们所引用的两个元素一样，例如$(".bed2, label-two")。

是的，我认为您正在寻找的是$.merge，它可以帮助您将两个HTML元素对象合并为一个HTML元素数组，这些元素可以共同引用，如下所示。

$.merge(bed2,labelTwo).css({'border':'1px solid red'});

您可以在控制台中使用语句console.log($(".bed2,.label-two"),$.merge(bed2,labelTwo));来查看它们是否相同，这只是两种情况下返回的html元素的集合。

观看演示

$(document).ready(function() {

  var bed2 = $(".bed2");
  var label2 = $(".label-two");

  $('button').on('click', function() {
    $.merge(bed2, label2).css({
      'background': '#f8f8f8',
      'border': '1px solid red',
    });

  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bed2">
  BED
</div>

<div class="label-two">
  LABEL
</div>

<button>click me to add some css to both divs above atonce</button>

合并两个要共同引用的HTML元素对象

3 个答案: