使用jQuery顯示/隱藏多個表行

Question

我正在嘗試創建周期表和價格表。

表格標題包含用於更改幣種的選擇。 下面的表格行顯示了不同的期間和價格。 可以根據在select中選擇的貨幣顯示價格。

我是jQuery的新手，但是一直在這里閑逛並瀏覽許多帖子，其中許多內容都幫助我實現了這一目標！

但是，現在我在表中添加了第二行，並且價格僅在第一行中發生了變化，而在第二行中沒有發生變化。

感謝您提供的任何幫助。

Javascript：

<script type="text/javascript">
function currencyCheck()
{
var option = document.getElementById("currency-select").value;
    if (option == "EURO") {
        document.getElementById("EUR").style.display ="";
        document.getElementById("GBP").style.display ="none";
        document.getElementById("DKK").style.display ="none";
    }
    if (option == "GBPOUND") {
        document.getElementById("GBP").style.display ="";
        document.getElementById("EUR").style.display ="none";
        document.getElementById("DKK").style.display ="none";
    }
    if (option == "DKKRONER") {
        document.getElementById("DKK").style.display ="";
        document.getElementById("EUR").style.display ="none";
        document.getElementById("GBP").style.display ="none";
    }
}
</script>

HTML：

   <table class="rates">
<thead>
<tr>
    <th>
        Period
    </th>
    <th>
        <select style="width:100px;" id="currency-select" onchange="currencyCheck()">
            <option selected="selected" value="EURO">EUR</option>
            <option value="GBPOUND">GBP</option>
            <option value="DKKRONER">DKK</option>
        </select>
        &nbsp;/Week
    </th>
</tr>
</thead>
<tbody>
<tr class="odd">
    <td class="dates">
        January
    </td>
    <td>
        <div class="cost">
            <div id="EUR">
                €500
            </div>
            <div id="GBP" style="display:none">
                £350
            </div>
            <div id="DKK" style="display:none">
                DKK 1500
            </div>
        </div>
    </td>
</tr>
<tr class="even">
    <td class="dates">
        February
    </td>
    <td>
        <div class="cost">
            <div id="EUR">
                €500
            </div>
            <div id="GBP" style="display:none">
                £350
            </div>
            <div id="DKK" style="display:none">
                DKK 1500
            </div>
        </div>
    </td>
</tr>
</tbody>
</table>

Answer 1

id應該是唯一的標識符，所以document.getElementById()僅返回第一個實例，因為它們只能是一個。 將id更改為一個類，並改用document.getElementByClassName() 。

Answer 2

因為您正在更改ID為“ GBP”等的元素。 通過使用getElementById您僅更改一種元素的行為。 您應該為所有元素分配一個類，例如：

<div class="GBP">£350</div>

之后，您將獲得所有類名稱為GBP的元素，並通過它們循環進行所需的操作：

var elems = document.getElementsByClassName('GBP');
for(var i=0; i < elems.length; i++) { 
    elems[i].style.display='block'
}

Answer 3

    <table class="rates">
    <thead>
        <tr>
            <th>Period</th>
            <th>
                <select style="width:100px;" id="currency-select" onChange="currencyCheck()">
                    <option selected="selected" value="EURO">EUR</option>
                    <option value="GBPOUND">GBP</option>
                    <option value="DKKRONER">DKK</option>
                </select>&nbsp;/Week</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="dates">January</td>
            <td>
                <div class="cost">
                    <div class="EUR">€500</div>
                    <div class="GBP" style="display:none">£350</div>
                    <div class="DKK" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="dates">February</td>
            <td>
                <div class="cost">
                    <div class="EUR">€500</div>
                    <div class="GBP" style="display:none">£350</div>
                    <div class="DKK" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

腳本

    function currencyCheck() {
    var option = document.getElementById("currency-select").value;
    var elems1 = document.getElementsByClassName('EUR');
    for (var i = 0; i < elems1.length; i++) {
        elems1[i].style.display = (option == 'EURO' ? 'block' : 'none');
    }
    var elems2 = document.getElementsByClassName('GBP');
    for (var i = 0; i < elems2.length; i++) {
        elems2[i].style.display = (option == 'GBPOUND' ? 'block' : 'none');
    }
    var elems3 = document.getElementsByClassName('DKK');
    for (var i = 0; i < elems3.length; i++) {
        elems3[i].style.display = (option == 'DKKRONER' ? 'block' : 'none');
    }
}

Answer 4

更好的解決方案是為cost div使用相同的類名作為option值，然后使用以下方法：

jQuery的：

function currencyCheck() {
    var option = $("#currency-select").val();
    $('.cost>div').hide();
    $('.' + option).show();
}

HTML：

<table class="rates">
    <thead>
        <tr>
            <th>Period</th>
            <th>
                <select style="width:100px;" id="currency-select" onchange="currencyCheck()">
                    <option selected="selected" value="EURO">EUR</option>
                    <option value="GBPOUND">GBP</option>
                    <option value="DKKRONER">DKK</option>
                </select>&nbsp;/Week</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="dates">January</td>
            <td>
                <div class="cost">
                    <div class="EURO">€500</div>
                    <div class="GBPOUND" style="display:none">£350</div>
                    <div class="DKKRONER" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="dates">February</td>
            <td>
                <div class="cost">
                    <div class="EURO">€500</div>
                    <div class="GBPOUND" style="display:none">£350</div>
                    <div class="DKKRONER" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

演示： JSFiddle