Question

它并不重要，只是想让我的代码完美无缺。所以，我们有：

var $a = $('div#first-very-long-selector');
var $b = $('div#second-very-long-selector');

// I can make this:
$a.fadeOut(10000);
$b.fadeOut(10000);

// or this:
$('div#first-very-long-selector,div#second-very-long-selector').fadeOut(10000);

// we can put object to selector, like:
$($a).fadeOut(10000);
$($b).fadeOut(10000);

// BUT this way doesn't work:
$($a,$b).fadeOut(10000);

// put them to array doesn't work too:
$([$a,$b]).fadeOut(10000);

// use .map doesn't help:
[$a,$b].map($.fadeOut);

我们都知道将对象放到变量中对性能更好，而且通常它会使代码更短。但是如何将这些变量一起用于同一行为呢？

Answer 1

jQuery选择器可以针对ID或类。请在此处阅读：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

此外 - 您不需要使用$设置javascript变量。你可以这样做

var CoolVariable = $('#whateverdiviwant');

例如，假设您想淡出一个元素。您将定位该特定ID。

但是如果你想要定位所有的元素，那么你就会瞄准这个类。如果您计划在多个元素上运行相同的函数，则可以执行此操作。

我为你做了一个小试验，展示了我上面提到过的内容。包括将元素设置为变量。

var a = $('#one'),
    b = $('#two'),
    c = $('.div-choice');

$('#fadeA').click(function() {
   a.fadeOut(1000);
});

$('#fadeB').click(function() {
   b.fadeOut(1000);
});

$('#fadeAll').click(function() {
   c.fadeOut(1000);
});

$('#revert').click(function() {
   c.fadeIn(1000);
});

#one {
  background-color: blue;
}

#two {
  background-color: red;
}

.div-choice {
  height: 50px;
  width: 50px;
  display: inline-block;
  color: white;
  text-align: center;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="div-choice">A</div>
<div id="two" class="div-choice">B</div>
<button id="fadeA">Fade A</button>
<button id="fadeB">Fade B</button>
<button id="fadeAll">Fade All</button>
<button id="revert">Bring back</button>

修改

希望我不浪费你的时间阅读 - 但我相信你必须将变量存储为数组，然后循环遍历该数组，为数组中的每个项调用函数。这可能是 （我知道） 实现您所需要的唯一方式。

像这样：

var g = [ a, b ], gLength = g.length; $('#someDiv').click(function() { for ( i = 0; i < gLength; i++ ) { g[i].fadeOut(1000); } });

使用我的更新查看此codepen。 http://codepen.io/anon/pen/KNyjMr

Answer 2

标记是否可以迭代所有子元素并使用this附加所需的函数？

http://codepen.io/anon/pen/vyWoEr

<div id="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

<script>
$('#wrapper').children('div').each(function () {
  $(this).click(function(e) {
    alert('I can do stuff to ' + $(this).text())
  })
});
</script>

在一个选择器

2 个答案: