0

基本的に、1つのページにさまざまな単語（単語、定義など）の情報を含む複数のdivがあります。したがって、各「ワードカード」は次のように書かれています（私は余分なものをいくつか取り出しました）：

<div id="card">
    <div class="card-info-box" id="definition" wordID="1">To lessen or get rid of any pain or suffering.</div>
    <a href="#" class="definition" wordID="1">Define</a> 
</div>

各単語に「wordID」のカスタム属性を追加しました。jQueryを使用して、適切な#definitiondivを切り替える「Define」リンクを作成しようとしています。これまでのところ、次のjQueryコードがあります。

    $(document).ready(function() {
    $('#definition').hide();
    $(".definition").click(function(evt) {
        var d = $(this).attr("wordID");
        $("#definition[wordID=" + d + "], #definition[wordID=" + d + "]").toggle();
    }); 
});

1ページにカードが1つしかないため、jQueryはそれぞれの定義divを切り替えることで正常に機能します。ただし、カードdivを複製し、2番目のセットでwordIDを2に変更すると、2番目のdivの定義リンクは何もしません。最初のものは、想定どおりに機能します。

jQueryが各wordID属性値に対して正しく機能するように変更する必要があるものはありますか？

ありがとう！

4

3 に答える 3

1

私の知る限り、属性が異なっていても、同じ ID を持つ要素を複数持つことはできません。代わりに、クラスまたはデータ項目名を使用してみてください。

于 2012-07-05T02:26:21.623 に答える
1

以下で試してみてください。属性セレクターを使用する必要はありません$(this).siblings('.card-info-box')。切り替えたいdivを選択するために使用できます。

$(".definition").click(function(evt) {
    evt.preventDefault();
    $(this).siblings('.card-info-box').toggle();
});
于 2012-07-05T02:28:56.290 に答える
0

以前の回答と同様に、ページに同じid属性を持つ要素を複数含めることはできません。

以前にもカスタム属性を使用してみましたが、問題があり、厳密に有効なhtmlではありません。私が今使用しているアプローチは、次のように要素のid属性でwordIDを使用することです。

<div id="card-1">
  <div class="card-info-box" id="definition-1">To lessen or get rid of any pain or suffering.</div>
  <a href="#" class="definition" id="define-word-1">Define</a>
</div> 
<div id="card-2">
  <div class="card-info-box" id="definition-2">A state of general wellbeing.</div>
  <a href="#" class="definition" id="define-word-2">Define</a>
</div>

次に、必要に応じて関連するid値を作成します。

$(document).ready(function() {
  $('.card-info-box').hide();
  $(".definition").click(function(evt) {
        var d = $(this).attr("id").replace("define-word-", "");
        $("#definition-" + d).toggle();
        return false;
    });
});​

（クリックされたリンクがたどられないように戻り値を追加するように編集されました/ブラウザがページの上部にジャンプして戻ります）

于 2012-07-05T02:38:33.427 に答える