如何使用 javascript 切換元素

Question

我正在使用 woocommerce 插件在 wordpress 中工作，我不想在我的產品上顯示兩種不同的價格。

一種是在用戶訪問頁面時顯示的默認值，另一種是在用戶單擊按鈕時顯示。 如果他再次單擊相同的按鈕，則應再次顯示先前的價格。 等等。

所以對頁面上顯示的內容進行某種類型的檢查，我猜可以在 JQuery 中完成，但還有其他方法嗎？ 我嘗試了一些 JQuery，但在使用 woocommerce 時遇到了一些問題。

<?php
$incl = $product->get_price_including_tax();?>

<p id="excl" class="price"><?php echo $product->get_price_excluding_tax();?> excl.</p>

<button type="button" onclick="document.getElementById('excl').innerHTML = <?php echo $incl;?>">Click Me!</button>

這是一種方式，但需要前面提到的檢查才能再次使用另一種方式。

還有一個額外的問題：那些 incl 和 excl tax call 破壞了在管理端完成的設置，價格的格式。 所以 6.000,00 瞬間變成了 6000。我試過 woocommerce_price，它有效但已被棄用。 有沒有類似的功能來做到這一點？ 在文檔中找不到任何內容。

Answer 1

使用ternary運算符， condition ? expr1 : expr2 condition ? expr1 : expr2

條件（三元）運算符是唯一一個接受三個操作數的 JavaScript 運算符。 此運算符經常用作 if 語句的快捷方式[ 參考資料]

注意：不要在標記中混淆你的邏輯。 你應該有一個單獨的功能。

 <p id="excl" class="price">100</p> <button type="button" onclick="document.getElementById('excl').innerHTML=document.getElementById('excl').innerHTML=='500'?'100':'500'">Click Me!</button>

Answer 2

我會將它們都寫入 DOM 並使用 jQuery 中的toggleClass()

<?php
$incl = $product->get_price_including_tax();?>
<div class="mycont">
    <p id="excl" class="price excl"><?php echo $product->get_price_excluding_tax();?> excl.</p>
    <p id="incl" class="price incl"><?php echo $incl;?> excl.</p>
</div>
<button type="button">Click Me!</button>

使用以下 CSS：

.mycont > .price.incl {display: none}
.mycont.show_incl > .price.incl {display: block}
.mycont.show_incl > .price.excl {display: none}

和 jQuery：

$('button').on('click', function(){
    $('.mycont').toggleClass('show_incl');
});

在這里小提琴

如果你想用純 javascript 來做，我建議在按鈕上調用一個函數onClick事件，並像這里所說的那樣切換類