jQuery Quicksand を使用してクリックされたアイテムの「data-id」属性を取得するにはどうすればよいですか?

jQuery Quicksand でクリックされた項目の Data-id 属性を取得する

jQuery Quicksand プラグインを使用する場合、クリックされた要素の data-id 属性を取得することが不可欠です。それを Web サービスに渡すか、さらなるアクションを実行します。この記事は、この要件に対する包括的な解決策を提供することを目的としています。

Quicksand プラグインを使用すると、ページを再読み込みせずに要素を動的に並べ替えたりフィルターしたりできます。クリック イベントを並べ替えられた要素またはフィルターされた要素にバインドするには、.on() メソッドが使用されます。ただし、クリックされた要素に関連付けられた特定の情報を取得するには、data-id 属性にアクセスする必要があります。

Data-id 属性の取得

data-id 属性の値を取得するには、jQueryには 2 つの方法があります:

を使用する.attr():

このメソッドは、属性値を文字列として直接取得します。

$(this).attr("data-id")

.data() の使用:

jQuery 1.4.3 でリリースされたこのメソッドは、解析されたデータ型として属性値を取得します (

$(this).data("id")

実装例

次の HTML および JavaScript コードを考えてみましょう:

<ul>

$("#list li").on('click', function() {
  let dataId = $(this).attr("data-id") || $(this).data("id");
  alert(dataId);
});

この例では、data-id 属性の値使用する jQuery バージョンに応じて、.attr() メソッドまたは .data() メソッドを使用してアクセスできます。 data-id="id-40" の要素をクリックすると、アラート ダイアログに値が表示されます。

以上がjQuery Quicksand を使用してクリックされたアイテムの「data-id」属性を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。