Question

我的问题很简单。是否可以为每个选择器设置不同的值？在我的真实项目代码中，我这样做。

$("#zero").on("click", function() {
  pressNumButton('0');
});

$("#one").on("click", function() {
  pressNumButton('1');
});

是的，我知道这个问题的一个解决方案。我可以为用户按下的每个数字使用相同的类，然后获取它的值，因为每个id #zero - #nine的值都是0 - 9.是否可以使用ID执行此操作？

在这里使用类是最好的解决方案吗？

我已经在我的代码段中注释了一些内容，以便您更好地理解它。

// It should display One for first selector, and Two for the second one
//$('#one, #two').text('One');

// In other words, how can I do this job with a one-liner? I know I can do it with multiple lines but the problem I have many selectors, not just two. It's just an example
$('#one').text('One');
$('#two').text('Two');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>

Answer 1

如果要简化逻辑，可以创建一个对象，该对象由元素的id属性键控，并且具有应将其文本设置为的值。然后，您可以在所有元素实例上使用单个事件处理程序。像这样：

var content = {
  one: 'Text A...',
  two: 'Text B...'
}

$('.foo').click(function() {
  $(this).text(content[this.id]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="one">click me</div>
<div class="foo" id="two">click me</div>

如果需要，可以通过使用普通数组并通过索引关联元素来进一步简化。然而，这更加脆弱，可以通过修改HTML来解决，这就是为什么我建议使用带有id键的对象的原因。

Answer 2

如果你不想在@Rory的回答中建议将值存储在对象中那么你就可以这样做

＆＃13;

$('.foo').click(function() {
  $(this).text("Number " + $(this).attr("id"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="one">click me</div>
<div class="foo" id="two">click me</div>

＆＃13;

是否可以为每个选择器设置不同的值？

2 个答案: