Question

我试图执行

$('a').click(function egg (event) { 
  if ($this.is('#home') || $this.is('#art') || $this.is('#con') || $this.is('#port') || $this.is('#m2')) {

  }  else {
    event.preventDefault(); 
  }
});

我只想执行＆＃34; event.preventDefault（）;＆＃34;但是，如果元素id不等于我在if语句中列出的参数，则只执行＆＃34; event.preventDefault（）;＆＃34;在所有＆＃34; .a＆＃34;元素，我怎样才能达到我想要获得的结果？

Answer 1

检查一下......

$(this)是有效的jQuery包装器。不是$this

$('a').click(function egg(event) {
  if ($(this).is('#home') || $(this).is('#art') || $(this).is('#con') || $(this).is('#port') || $(this).is('#m2')) {

  } else {
    event.preventDefault();
  }
});

Answer 2

//place all links you want in the if part here
var goodLinks = ['home', 'art', 'con'];


$('a').on('click', function(e){

    var id = e.target.id;

   if(goodLinks.includes(id)){

     console.log('valid id');

   } 
   else{
     e.preventDefault();

     console.log("invalid id -- else");

   }

});

Answer 3

如果您使用.not()构造从选择中排除特定ID，并将该ID列表组合为单个选择器作为逗号分隔列表，而不是必须，则可以使这更简单一些有一系列.is(foo) || .is(bar)...。

$('a').not('#home, #art, #con, #port, #m2').click(function(e) {
 console.log("e.preventDefault will fire");
 e.preventDefault();
});

$('#home').click(function() { /* your code here */ });
$('#art').click(function() { /* your code here */ });
// ...etc

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="home" href="#">home</a>
<a id="art" href="#">art</a>
<a id="con" href="#">con</a>
<a id="port" href="#">port</a>
<a id="m2" href="#">m2</a>
<a id="other" href="#">other</a>
<a href="#">another</a>

您想要在#home等链接上的特定功能仍然会作为每个元素的单独点击事件添加，就像您现在可能已经拥有它一样;他们不会拿起event.preventDefault()。

Answer 4

编辑：更改了该功能并为所有允许的ID创建了一个数组。向下滚动以查看此示例中的标签。我真的希望我能帮到你，但这就是你想要的吗？

你去了：

＆＃13;

var allowed_ids = ['home', 'art', 'con', 'port', 'm2'];
var scroll_speed = 1500;

$('a').click(function(e) { 
  if ($.inArray( e.target.id, allowed_ids ) > -1) {
    $('html, body').animate({scrollTop: 0}, scroll_speed);
  } else {
    alert("invalid! ID is not in Array!");
  }
  e.preventDefault();
});

＆＃13;

#content{
  height:1500px;
  background:grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
This is the top!
</div>
<a id="home" href="#">home</a>
<a id="art" href="#">art</a>
<a id="con" href="#">con</a>
<a id="port" href="#">port</a>
<a id="m2" href="#">m2</a>
<a id="other" href="#">invalid</a>

＆＃13;

如果元素不等于这些，请执行此操作

4 个答案: