如果元素不等於這些，這樣做

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(); 
    } 
}); 

我只想要執行「event.preventDefault（）;」但是，如果元素ID不等於我在if語句中放置的參數，那麼它只會執行「event.preventDefault（）;」在所有「.a」元素上，我怎樣才能達到我想要得到的結果？

Answer 1

這可以使相當簡單一點，如果你使用.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 2

入住此...

$(this)是有效的jQuery wrapper.Not $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 3

編輯：改變了功能，創造了所有允許的ID的數組。在此示例中向下滾動以查看a標籤。我真的希望我能幫到你，但這是你想要的嗎？

你去那裏：

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(); 
 
});

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

<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>

Answer 4

//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"); 

    } 

});