Question

$('#x').click(function() {
  var letter = 'X';
  alert(letter);
})
$('#y').click(function() {
  var letter = 'Y';
  alert(letter);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x'>X</div>
  <div id='y'>Y</div>
 </div>

在我的脚本中，当我点击其中一个并提醒时，如何定义其中一个字母，同时在一个函数中？像这样的东西

$('#x').click(function() {
  var letter = 'X';
})
$('#y').click(function() {
  var letter = 'Y';
})
alert(letter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x'>X</div>
  <div id='y'>Y</div>
</div>

我确实知道变量字母没有在函数外部定义，但是如何将两个函数合并在一起并提醒它一次？

Answer 1

您可以将点击事件处理程序的选择器与$('#x, #y')结合使用，然后使用this.innerHTML从点击的元素中获取HTML并提醒它（或this.id如果您想使用代替）。

＆＃13;

$('#x, #y').click(function() {
  var letter = this.innerHTML;
  alert(letter);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x'>X</div>
  <div id='y'>Y</div>
</div>

＆＃13;

Answer 2

使用单个处理程序来定位可点击元素 - 这可以通过向两者添加共享类来完成 - 在这种情况下，我只使用了您拥有的内容。然后使用每个单击元素上的属性来区分 - 我再次使用data-letter="X"属性，但我刚刚使用了您的ID。

$('#div div').click(function() {
  var letter = this.id;
  alert(letter);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x'>X</div>
  <div id='y'>Y</div>
</div>

Answer 3

您可以使用解决方案https://jsfiddle.net/3g6q8h59/

$('div').click(function(e){
	e.stopPropagation();
	console.log("ID: " + $(this).attr('id'));
  console.log("InnerHTML: " + $(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x'>X</div>
  <div id='y'>Y</div>
</div>

我使用过jQuery。将点击的事件附加到 div 。

停止点击 div 的事件传播。

Answer 4

有多种方法可以做到这一点：

使用id = div

获取主div中的所有div

$('#div div').click(function() {
  var letter = this.innerHTML;
  alert(letter);
})

通过将所需的div ID作为jquery选择器来获取特定的div

$('#x, #y').click(function() {
  var letter = this.innerHTML;
  alert(letter);
})

为简单起见，您可以为要以相同方式处理的所有div添加自定义类（例如＆＃39; needAlter＆＃39;），然后使用类名选择器。

$('.needAlter').click(function() {
  var letter = this.innerHTML;
  alert(letter);
})

为此，您还必须在html中进行更改：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <div id='x' class='needAlter'>X</div>
  <div id='y' class='needAlter'>Y</div>
</div>

在一个函数中，如何定义两个元素的一个属性

4 个答案: