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

Ids应该是唯一标识符，因此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>

DEMO： JSFiddle

使用jquery显示/隐藏多个表行

4 个答案:

脚本