class 如何在单击时获得最接近的跨度值

Question

当用户点击 link。我试图通过 class 找到最接近的跨度值，然后获取 classes 文本。目前它只返回空文本：

这里是 HTML:

<div class="plan recommended">
    <div class="recommended-badge"><span>DOUBLE DATA</span></div>

    <div data-equalizer-listener="plan-heading" class="plan-header">
        <div class="prices">
            <div class="col total">
                <div class="price"><sup>$</sup> <span class="amount">85</span> <span class="caption">per month</span></div>
            </div>

            <p class="min-payment">Min. Total Cost is ,040 over 24 months.</p>
        </div>
    </div>

    <div class="features">
        <div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;">
            <div class="description"><span class="highlight-text">28GB TOTAL DATA</span><br>
                <span class="legal">Includes 14GB + 14GB bonus data for 24 mths<br>
New and recontracting services only<br>
Offer ends 15/04/18<br>
 per extra 1GB</span></div>

            <div class="more-data-info hide" data-information="included-data"><strong>Data Pool -</strong> Combine any of our latest My Plan Plus (including SIM Only) and My Mobile Broadband Plus plans on the one bill to pool and share the data.</div>

            <div><a href="#" class="more-data-link" data-information="included-data" tabindex="0">more</a></div>
        </div>

    </div>
</div>

和我的javascript

所以当有人点击带有 class="more-data-link" 的 a href 时，我想找到带有 class="amount" 的跨度并获取其文本

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('plan-header').find('.price').find('.amount').text();
  console.log(x);
});

Answer 1

 $(".more-data-link").on("click", function(event) { 
      event.preventDefault(); 
      var x = $(this).closest('.plan-header').find('.amount').text(); 
      console.log(x); 
 });

已修复。您不需要使用第二个查找并且您漏掉了一个点

Answer 2

请使用这个fiddle

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('.plan.recommended').find('.plan-header .price .amount').text();
  console.log(x);
});

<div class="plan recommended">
    <div class="recommended-badge"><span>DOUBLE DATA</span></div>
    <div data-equalizer-listener="plan-heading" class="plan-header">
        <div class="prices">
            <div class="col total">
                <div class="price"><sup>$</sup> 
                    <span class="amount">85</span>    
                    <span class="caption">per month</span></div>
                </div>
               <p class="min-payment">Min. Total Cost is ,040 over 24 months.</p>
            </div>
     </div>
    <div class="features">
        <div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;">
            <div class="description"><span class="highlight-text">28GB TOTAL DATA</span><br>
                <span class="legal">Includes 14GB + 14GB bonus data for 24 mths<br>New and recontracting services only<br>Offer ends 15/04/18<br> per extra 1GB</span>
            </div>
            <div class="more-data-info hide" data-information="included-data">
             <strong>Data Pool -</strong> Combine any of our latest My Plan Plus (including SIM Only) and My Mobile Broadband Plus plans on the one bill to pool and share the data.
            </div>
            <div>
             <a href="#" class="more-data-link" data-information="included-data" tabindex="0">more</a>
            </div>
        </div>
    </div>
</div>

你需要selectparent（推荐方案）class然后找到它的child...

Answer 3

我检查了你的脚本，发现其中有一些错误，用 innerHtml 代替 text()，closest('plan-header') 应该是 closest('.plan-header')。但可能你没有得到正确的结果，因为它会在 parents div 中搜索而不是 subling check link https://www.w3schools.com/jquery/traversing_closest.asp

您可以通过创建 more-data-link 的属性并在其中保存 amount 的值并使用以下代码来使用最简单和最好的方法来完成相同的操作。

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
var x = $(this).attr('amount');
console.log(x);
});

Answer 4

对于那些寻求没有jquery解决方案的人（点击事件中的逻辑与Sarvan Kumar描述的相同）：

window.onload = function(){
    for(var tL=document.querySelectorAll('.more-data-link'), i=0, j=tL.length; i<j; i++){
        tL[i].onclick = function(){
            var tE = function fA(e){return !e || (e.className && e.className.indexOf('plan') !== -1 && e.className.indexOf('recommended') !== -1) ? e && e.querySelector('.amount') : fA(e.parentNode)}(this);
            console.log(tE ? tE.textContent : '404')
        }
    }
}

class 如何在单击时获得最接近的跨度值

How to get closest value of span on click by class

html

javascript

jquery

onclick

closest