第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

如何使用JavaScript捕獲發(fā)生點(diǎn)擊事件時(shí)的p元素值

如何使用JavaScript捕獲發(fā)生點(diǎn)擊事件時(shí)的p元素值

千巷貓影 2023-07-20 17:21:51
這是我的代碼。我想在單擊按鈕時(shí)捕獲星云和價(jià)格 1.44。任何人都可以幫助我嗎?網(wǎng)頁代碼           <div class="item__top">                <p> Nebula</p>                <p>                    Price<span class="big-price">1</span>.44                    <span class="text-large">/mo</span>                </p>                <p>$2.88</p>                                <button class="calculate-hosting">Get Started</button>                <p>You pay $17.28 — Renews at $33.88/year</p>            </div>JS代碼var calHosting = document.querySelectorAll('.calculate-hosting');[...calHosting].forEach(cal=>{    cal.addEventListener('click',function(event){        document.getElementById('cal-container').style.display='block';    });});Note: I am dealing with mutiple buttons so thats why I sued querySelectorAll.
查看完整描述

1 回答

?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

您可以使用this來引用單擊的按鈕,.parentElement向上爬,然后選擇段落及其內(nèi)部文本??梢詮哪抢锇凑漳矚g的方式解析文本。


var calHosting = document.querySelectorAll('.calculate-hosting');

[...calHosting].forEach(cal => {

    cal.addEventListener('click', function (event) {

        var paragraphs = this.parentElement.querySelectorAll("p");

        var p1 = paragraphs[0].innerText;

        var p2 = paragraphs[1].innerText;

        var price = Number(p2.match(/\d+\.\d+/)[0]);

        

        console.log(p1); // Nebula

        console.log(p2); // Price1.44 /mo

        console.log(price); // 1.44

        

        // document.getElementById('cal-container').style.display = 'block';

    });

});

<div class="item__top">

    <p> Nebula</p>

    <p>

        Price<span class="big-price">1</span>.44

        <span class="text-large">/mo</span>

    </p>

    <p>$2.88</p>


    <button class="calculate-hosting">Get Started</button>

    <p>You pay $17.28 — Renews at $33.88/year</p>

</div>


查看完整回答
反對 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號