So schalten Sie Elemente mit Javascript ein

Question

Ich arbeite in WordPress mit dem Woocommerce Plugin, wo ich zwei verschiedene Preise auf meinen Produkten zeigen möchte.

Ein Standard, der angezeigt wird, wenn der Benutzer auf die Seite gelangt, und einer, der angezeigt wird, wenn der Benutzer auf eine Schaltfläche klickt. Klickt er erneut auf die gleiche Schaltfläche, sollte der vorherige Preis erneut angezeigt werden. Und so weiter.

Also eine Art von Überprüfung, was auf der Seite angezeigt wird, was in JQuery getan werden könnte, denke ich, aber gibt es andere Wege? Ich habe ein wenig mit JQuery versucht, habe aber ein paar Probleme mit Woocommerce.

Das macht den einen Weg herum aber braucht die vorher erwähnte Kontrolle, um anders herum benutzt zu werden.

Und eine zusätzliche Frage: diejenigen incl und excl tax call ruinieren die Einstellungen im Admin-Ende mit der Formatierung von Preisen. So 6.000,00 für Instant wird 6000. Ich habe versucht, woocommerce_price funktioniert, aber ist veraltet. Gibt es eine ähnliche Funktion, das zu tun? Kann nichts in der Dokumentation finden.

Answer 1

Ich würde sie beide DOM schreiben und verwenden toggleClass() von jQuery

<?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> 

Mit folgenden CSS:

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

Und jQuery:

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

Fiddle Here

Wenn Sie es in reinem Javascript tun wollen, würde ich vorschlagen, eine Funktion onClick Ereignis auf die Schaltfläche aufrufen und wechseln Klasse wie angegeben here

Answer 2

Verwenden ternary Operator, condition ? expr1 : expr2

Die bedingte (ternäre) Operator ist der einzige JavaScript-Operator, der drei Operanden nimmt. Sie nicht mischen-up Ihre Logik in Markup: Dieser Operator wird als Abkürzung für die if-Anweisung [Reference]

Hinweis häufig verwendet. Sie sollten dafür eine separate Funktion haben.

<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>