1

1 つのページに多くのアイテムがあり、1 人が各アイテムをレビューできます。「レビュー」をクリックすると、ライトボックスが開き、記入するフォームが表示されます。何がレビューされているかを知るために、項目名をフォーム フィールドに渡しています。ただし、データを渡すことができません。

アイテム名をフォームに渡すにはどうすればよいですか?

試みたコードは次のとおりです。

HTML

<div class="element indica" data-category="indica">
  <p class="type">I</p>
  <h2 class="name">Name</h2> <!-- Information I want to pass -->
  <p class="strain-info">Information Here</p>
  <p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p>
</div>

フォームコード

<!-- I omitted form code not relevant to question. -->
<input name="CAT_Custom_365569" type="text" class="cat_textbox" id="CAT_Custom_365569" value=" " maxlength="4000" readonly="readonly" />

JS

$('.fancy_button').click(function(){
   var strain = $(this).prev('h2').text();
   $('#CAT_Custom_365569').val(strain);
});
4

4 に答える 4

2

prev直前の兄弟を選択するため、あなたの場合は機能しません。セレクターを渡すということは、「一致する場合にのみ前の兄弟を取得する」ことを意味します。これを試して：

var strain = $(this).closest('div').find('h2').text();
于 2013-07-23T04:01:47.457 に答える
1

@elclanrs is right prev は直前の兄弟を選択し、セレクターを与えると、前の兄弟がセレクターの基準を満たしていることを検証します。

これは、目的の結果を達成するための別の方法です。

$('.fancy_button').click(function(){   
    var strain = $(this).parent().siblings('h2').text();   
    $('#CAT_Custom_365569').val(strain);
});
于 2013-07-23T04:04:28.470 に答える
1

これが私がすることです：

HTML を出力するとき、「data-name」という新しい属性を a 要素に追加します。

<a data-name="the name" class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a>

次に、クリック ハンドラーで次のようにします。

$('.fancy_button').click(function(){
   var strain = encodeURIComponent($(this).attr('data-name'));
   $('#CAT_Custom_365569').val(strain);
});

ここでの利点は、将来変更される可能性のあるリンクの外部のマークアップに依存する必要がないことです。また、問題を台無しにする可能性のある文字が含まれている場合に備えて、名前の値もエンコードしました...適用される場合と適用されない場合があります。

于 2013-07-23T04:09:32.623 に答える
0

クラス セレクターには、先頭にドットが付きます。 

$(".element indica").find('.name').val();
于 2013-07-23T04:08:01.507 に答える