0

jQuery を使用して<h4>、ユーザーがクリックしたリンクに近いタグを取得しようとしています。以下のサンプル コードから、誰かが Product 2 の見出しの下にある [BUY ONLINE] リンクをクリックした場合、jQuery を使用してこの<h4>タグのテキスト、つまり「Product 2」を取得したいと考えています。

次のことを試しましたが、どのリンクがクリックされても、値として常に「製品 1」しか表示されません。

$(".products h4").first().text();

HTML:

<div class="products">
<h4>Product 1 Title</h4>
<p>Product 1 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product1"><span>BUY ONLINE</span></a>
</div>
</div>

<div class="products">
<h4>Product 2 Title</h4>
<p>Product 2 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product2"><span>BUY ONLINE</span></a>
</div>
</div>

<div class="products">
<h4>Product 3 Title</h4>
<p>Product 3 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product3"><span>BUY ONLINE</span></a>
</div>
</div>
4

4 に答える 4

4

クリック機能を使用していて、 をクリックしたとしますa。

$(this).closest(".products").find('h4').text();
于 2013-08-02T19:29:30.830 に答える
0

あなたが解決しようとしている問題を再考してから、解決策を考えてみます。

テキストが必要な「オンラインで購入」をクリックするとどうなりますか? プレゼンテーションに使用していますか、それとも実際の購入プロセスの一部であり、バックエンド (または同様のもの) に送信されていますか?

h4「オンラインで購入」ボタンに最も近いテキストを信頼すると、エラーが発生しやすくなります。

この DOM トラバーサルと奇妙な結合の代わりに、[オンラインで購入] ボタンに data-attribute を設定できますか?

<span data-product-id="0" data-product-name="Product One">BUY ONLINE</span>

...またはさらに良い...

<button data-product-id="0" data-product-name="Product One">BUY ONLINE</button>

:)

于 2013-08-02T19:37:47.950 に答える
0

$(this).closest(".products h4").text(); h4 タグを常に .products の子として保持すると仮定すると、そのテキストが表示されます。

于 2013-08-02T19:38:33.590 に答える
0

それを得る多くの方法..

いくつかは..

使用してparents()

 $('.products a span').click(function(){
    alert($(this).parents('.products').find('h4').text());
});

を使用してclosest()。

$('.products a span').click(function(){
    alert($(this).closest('.products').find('h4').text());
});

使用してsiblings()

$('.products a span').click(function(){
alert($(this).parents('.buyatdealer').siblings('h4').text());
});
于 2013-08-02T19:29:48.063 に答える