2017-02-19 14 views
-5

私は、さまざまなアイテムの価格を表示するテーブルがたくさんある小さなHTML Webページを持っています(下記の例を参照)。ウェブページですべての価格(数値)を20%に変更

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <table border="1"> 
    <tr> 
     <td>1</td> 
     <td>Item 1</td> 
     <td>$40</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Item 2</td> 
     <td>$20</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Item 3</td> 
     <td>$50</td> 
    </tr> 
    </table> 
</body> 

問題は、ボタンを押すだけですべての価格を20%割引で交換する方法が必要になることです。私はさまざまなオプションをgoogleにしようとしましたが、ここでは最高の解決策が何であるかを理解できません。

価格を検索して「価格x 0.8」に置き換えるためのスクリプトや、実際の価格「$ 40」と割引価格「$ 32」を入力して表示するためのスクリプトを作成するにはどうすればよいですか1つは当時。

または、値引きのある重複したページを作成してそのページにリンクするより良い解決法ですか?

敬具、アレクサンダー

+3

はStackOverflowのへようこそ! Java!= Javascriptのことを覚えておいてください。彼らは車とカーペットに似ています。 –

+0

これは本当にwordpressですか?もしそうなら、dbクエリを実行することができます – nogad

+0

はい、そこには、JavaScriptがあります。正しいスクリプトを作成するには、作業しているコードの例を提供する必要があります。本質的には、あなたのコードを書くのではなく、コードの問題を解決するのに役立つここです。 – Chris

答えて

0

次のヘルプん:

var currentMode = 1; 
 
var discount = 0.20; 
 
var reverseDiscount = 1/(1-discount); 
 

 
function togglePrices() { 
 
    var prices = document.getElementsByClassName("price"); 
 
    for (var i = 0; i < prices.length; i++) { 
 
    var individualPrice = prices[i].innerHTML.substring(1); 
 
    
 
    if(currentMode == 1) { 
 
     individualPrice = parseFloat(individualPrice) * (1-discount); 
 
    } else { 
 
     individualPrice = parseFloat(individualPrice) * reverseDiscount; 
 
    } 
 

 
    prices[i].innerHTML = "$" + individualPrice; 
 
    } 
 
    currentMode = (++currentMode) % 2; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Item 1</td> 
 
     <td><span class="price" >$40</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Item 2</td> 
 
     <td><span class="price" >$20</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Item 3</td> 
 
     <td><span class="price" >$50</span></td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 

 
<button type="button" onclick="togglePrices()">Toggle Discounts</button> 
 
</body> 
 
</html>

+0

それはまさに私が探していたものであり、あなたは私のためにすべての仕事をしました!巨大な感謝:) – thor

+0

@thor:問題はありません。しかし、将来的にはいくつかのコードスニペットを提供してください。 :)また、回答を受け入れたものとしてマークしてください。 – uautkarsh

関連する問題