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>

这样可以解决这个问题，但需要先前提到的检查才能反过来使用。

还有一个额外的问题：那些包含和不包含税务的电话会破坏管理员端设置的价格格式。因此，即时的6.000,00变为6000.我尝试了woocommerce_price，但是已经弃用了。是否有类似的功能呢？无法在文档中找到任何内容。

Answer 1

使用ternary运算符condition ? expr1 : expr2

条件（三元）运算符是唯一需要三个操作数的JavaScript运算符。此运算符经常用作if语句[Reference]

的快捷方式

注意：不要在标记中混淆逻辑。你应该有一个单独的功能。

<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');
});

Fiddle Here

如果您想在纯JavaScript中执行此操作，我建议您在按钮上调用函数onClick事件，并按照所述here

切换类

如何使用javascript切换元素

2 个答案: