点击jquery中的多个元素?

时间:2017-05-17 08:11:59

标签: javascript jquery

我有:

<div id="d1">
   <div id="d2"></div>
   <div id="d3"></div>
   <div id="d4"></div>
</div>

我想要的是点击上面的任何一个元素调用这个函数:

function clickedele(){
    alert("Ele clicked");
}

我尝试了这些但没有效果:

var mhele_1 = $('#d1');
var mhele_2 = $('#d2');
var mhele_3 = $('#d3');
var menu_ico =$('#d4');
$([menu_ico.get(0),mhele_1.get(0), mhele_2.get(0),mhele_3.get(0)]).on('click', function(){
    alert("Ele clicked");
});

$('#menu_ico,#d1, #d2,#d3').on()

$('#menu_ico').add('#d1').add('#d2').add('#d3').on()

但没有人工作

7 个答案:

答案 0 :(得分:4)

您的选择器#menu_ico未指向元素ID为d1d2d3的元素,因此请合并id选择器和绑定点击事件处理程序。

$('#d2,#d3,#d4').on('click', function(){
    alert("Ele clicked");
});

$('#d2,#d3,#d4').on('click', function() {
  alert("Ele clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">a</div>
  <div id="d3">b</div>
  <div id="d4">c</div>
</div>

更新1:如果动态添加元素,请使用event delegation

// assumes `#d1` is not dynamically added,
// if yes then use any of it's ancestor present
$('#d1').on('click', '#d2,#d3,#d4', function(){
    alert("Ele clicked");
});

$('#d1').on('click', '#d2,#d3,#d4', function(){
    alert("Ele clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">a</div>
  <div id="d3">b</div>
  <div id="d4">c</div>
</div>

仅供参考:使用document ready handler中的代码在元素加载后运行,或在页面末尾添加代码。

更新2:更好的方法是为所有元素使用公共类,并将处理程序绑定到该元素。

$('.d').on('click', function() {
  alert("Ele clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2" class="d">a</div>
  <div id="d3" class="d">b</div>
  <div id="d4" class="d">c</div>
</div>

答案 1 :(得分:0)

function clickedele() {
  console.log('clicked');
}
$('div[id^="d"]').on('click',clickedele);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
   <div id="d2"></div>
   <div id="d3"></div>
   <div id="d4"></div>
</div>

使用$('div[id^="d"]')选择ID为d的所有div,您可以使用$('#d1 > div[id^="d"]')之类的任何其他模式来选择ID为d的所有div { {1}} div。

答案 2 :(得分:0)

$('.common').click(clickedele)

function clickedele() {
  alert("click from " + $(this).text())
  alert("Ele clicked");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2" class="common">1</div>
  <div id="d3" class="common">2</div>
  <div id="d4" class="common">3</div>
</div>

  1. 为所有人添加通用课程。
  2. 使用班级点击
  3. $('#d1 div').click(clickedele)
    
    function clickedele() {
      alert("click from " + $(this).text())
      alert("Ele clicked");
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="d1">
      <div id="d2" class="common">1</div>
      <div id="d3" class="common">2</div>
      <div id="d4" class="common">3</div>
    </div>

    1. 使用父作为选择器然后添加空格和div意味着父选择的孩子像$('#d1 div')

答案 3 :(得分:0)

HTML:

<div id="d1">
   <div id="d2" onclick="isClicked(this)">d2</div>
   <div id="d3" onclick="isClicked(this)">d3</div>
   <div id="d4" onclick="isClicked(this)">34</div>
</div>

javascript:

function isClicked(obj){
   alert(obj.id);
} 

https://jsfiddle.net/emilvr/dyzgcju5/

答案 4 :(得分:0)

事件代表团应该是要走的路。

&#13;
&#13;
$('#d1').on('click', clickFunc)

function clickFunc(e) {
  alert($(e.target).text())
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">1</div>
  <div id="d3">2</div>
  <div id="d4">3</div>
</div>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

您可以为子div提供一个共同的类。让我们假设类名是childDiv。然后你可以处理div的click事件。

$(".childDiv").on("click",function(){
    alert("Ele clicked");
})

答案 6 :(得分:-2)

最好使用循环:

const DateTime baseDate = new DateTime(2016,12,3);
...

//get rid of time part and calculate days from base date.
TimeSpan diff = DateTime.Today - baseDate; 
int weeksDiff = diff.Days / 7;
int periodNum = weeksDiff / 4;