web-dev-qa-db-ja.com

「$（this）にデータ属性がある場合」の使用方法

少し問題があります。それぞれに_data-function=""_属性が異なるボタンがいくつかあります。小さなスクリプトを実行して、どのボタンがクリックされたかを確認します。

_<a href="#" class="functionButton" data-function="blogFunctionaliteit">Blog</a>
<a href="#" class="functionButton" data-function="offerteFunctionaliteit">Offerte</a>
<a href="#" class="functionButton" data-function="overzichtFunctionaliteit">Offerte</a>
_

私はただ言うスクリプトが欲しい

_if $(this) has <data-function="blogFunctionaliteit"> { }
if $(this) has <data-function="offerteFunctionaliteit"> { }
if $(this) has <data-function="overzichtFunctionaliteit"> { }
else { // do nothing }
_

私はたくさんのことを試しましたが、すべてがうまくいっていないようです。

if ($(this).attr('data-function', 'blogFunctionaliteit') { }-オブジェクトに最初のパラメーターがあるかどうかだけをチェックするため、両方をチェックするのではなく、常にyesになります。

正しいjQueryコードを書いてくれてありがとう、または何か他のものを使うように助言してくれます。

jqueryif-statementcomparisoncustom-data-attribute
8
Sander Schaeffer

簡単な方法として、これを試してください：

_if ($(this).data("function") === 'blogFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'offerteFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'overzichtFunctionaliteit') {
    // TODO: enter your code...
} else {
    // do nothing
}
_

その間、私はJavaScriptで多くの経験を積んでおり、自分のコード提案についていくつかの改善点があります。誰かがこの回答を読んでいる場合は、次のコードを使用することを強くお勧めします。

_var self = this;
var $self = $(self);
var dataFunction = $self.attr('data-function');

switch (dataFunction) {
  case 'blogFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'offerteFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'overzichtFunctionaliteit':
    // TODO: enter your code...
    break;
  default:
    // do nothing
    break;
}
_

しかし、なぜこれを使用する必要があるのでしょうか。もっと複雑です！ええ、そうですが、ここに理由があります：

2つ目のコードスニペットのようなコードを書き始めれば、JavaScriptの問題は少なくなります。

20
ReeCube

できるよ：

if ($(this).attr('data-function') == 'blogFunctionaliteit') { }
6
Felix

jQueryはネイティブデータをサポートしています： https://api.jquery.com/jQuery.data/

$('a').click(function() {
    if($(this).data("function") === "blogFunctionaliteit"){
        alert("You clicked me.");
    };
});
3
Furkan Omay

あなたの間違いは、属性にいくつかの変更を適用するために関数属性を使用していることです。その代わりに、属性値が必要なものかどうかを確認したいと思います。だからこれはあなたがすべきことです：

if ($(this).attr('data-function') === 'blogFunctionaliteit') {
    //bla bla
}
2
Anastasios Vlasopoulos