Question

我有以下 CSS 和 HTML ：

＆＃13;

a {
  padding: 20px;
}
div {
  background: yellow;
  margin: 600px 0;
}

＆＃13;

<a href="#target_id_1">link 1</a>
<a href="#target_id_2">link 2</a>
<a href="#target_id_3">link 3</a>
<a href="#target_id_4">link 4</a>
<a href="#target_id_5">link 5</a>
<div id="target_id_1" class="target_class">I'm the target 1!</div>
<div id="target_id_2" class="target_class">I'm the target 2!</div>
<div id="target_id_3" class="target_class">I'm the target 3!</div>
<div id="target_id_4" class="target_class">I'm the target 4!</div>
<div id="target_id_5" class="target_class">I'm the target 5!</div>

＆＃13;

我希望在{em>＆＃34; target_class＆＃34; 作为目标的div时执行某些jquery操作。

我知道可以通过向这些a标记添加公共类（例如，＆＃34; link＆＃34; ），然后将click事件处理程序与该标记绑定来实现像这样的课：

$(".link").click(function(){
    //code
});

我需要知道的是： 是否有针对特定类/ ID的目标事件的jQuery处理程序？

类似的东西：

$(".target_class").target(function(){
   //code
});

如果没有，是否有替代来实现这一目标？

Answer 1

此方法的工作方式是选择器（a[href^="#target"]）匹配<a>以href开头的每个#target代码。

$('a[href^="#target"').click(function(){ alert('You targeted something.'); });

a {
  padding: 20px;
}
div {
  background: yellow;
  margin: 600px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#target_id_1">link 1</a>
<a href="#target_id_2">link 2</a>
<a href="#target_id_3">link 3</a>
<a href="#target_id_4">link 4</a>
<a href="#target_id_5">link 5</a>
<div id="target_id_1" class="target_class">I'm the target 1!</div>
<div id="target_id_2" class="target_class">I'm the target 2!</div>
<div id="target_id_3" class="target_class">I'm the target 3!</div>
<div id="target_id_4" class="target_class">I'm the target 4!</div>
<div id="target_id_5" class="target_class">I'm the target 5!</div>

Answer 2

我认为js中不存在此事件，但您可以处理哈希更改：

$(window).on('hashchange', function(){
   if ( $(this.location.hash).hasClass('target_class') ){
      // do stuff
   }
});

目标事件的jQuery选择器？

2 个答案: