如何獲取具有不同id的兩個隱藏標簽的值

Question

我使用兩個錨標簽將控件轉移到同一頁面。 並給出兩個具有相同id但不同值的隱藏輸入。 如給定的代碼所示。

 <li data-icon="false"><a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucher();">
        <input type="hidden" id="PRVou" value="payment">PaymentReceipt Voucher</a></li>

<li data-icon="false"><a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucher();">
        <input type="hidden" id="PRVou" value="receipt">ReceiptPayment Voucher</a></li>

我想通過使用以下javascript代碼獲取這些隱藏標簽的值。

loadAccForPayVoucher = function() {
    alert(document.getElementById('PRVou').value);
}

它始終提醒payment 。 我怎樣才能根據鏈接獲得價值。 謝謝。

Answer 1

無論其上下文如何， id屬性都是唯一的。 整個文檔中只應該有一個具有給定id元素。

給元素一個類名：

<input type="hidden" class="PRVou" value="payment">

然后使用getElementsByClassName ：

document.getElementsByClassName('PRVou')[0].value

Answer 2

嘗試這個：

<li data-icon="false"> <a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucher('payment');">
        <!--<input type="hidden" id="PRVou" value="payment">PaymentReceipt Voucher</a> --></li>

<li data-icon="false"><a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucher('receipt');">
        <!-- <input type="hidden" id="PRVou" value="receipt">ReceiptPayment Voucher</a> --></li>
<script type="text/javascript">
    loadAccForPayVoucher = function(type) {
        alert(type);
        //alert(document.getElementById('PRVou').value);
    }
</script>

Answer 3

在HTML中，ID屬性始終是唯一的，因此當您調用document.getElementById ，瀏覽器的DOM將出去並獲取具有給定ID的任何（很可能是第一個）元素。

我能做什么？

給他們單獨的ID，你的HTML將如下所示：

<li data-icon="false"><a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucherPayment();">
     <input type="hidden" id="PRVou-payment" value="payment"/>PaymentReceipt Voucher</a></li>

<li data-icon="false"><a href="#paymentReceiptVoucher" onclick="loadAccForPayVoucherReceipt();">
    <input type="hidden" id="PRVou-receipt" value="receipt"/>ReceiptPayment Voucher</a></li>

然后你的JavaScript將有單獨的事件處理程序：

loadAccForPayVoucherPayment = function() {
    alert(document.getElementById('PRVou-payment').value);
}
loadAccForPayVoucherReceipt = function() {
    alert(document.getElementById('PRVou-receipt').value);
}

更新 ：我讓你成為小提琴:) http://jsfiddle.net/YCXC8/