Javascript元素類

我會嘗試具體說明我正在嘗試做什麼以及到目前爲止嘗試過的內容。Javascript元素類

我的任務是建立一個與200個國家的下拉菜單。選擇一個國家時，它將顯示您所選國家/地區可用的付款處理器。

我已經得到的東西在這裏工作（只有3個國家） http://davidstokes.com/1/payments/payments-dropdown.html 我還添加代碼以JS提琴但由於某種原因不能正常工作，可能是外部文件不加載修正。

`function showDivIE() { 
document.getElementById('ireland').style.display = "block"; 
document.getElementById('canada').style.display = "none"; 
document.getElementById('uk').style.display = "none"; 
} 
function showDivCA() { 
document.getElementById('canada').style.display = "block"; 
document.getElementById('ireland').style.display = "none"; 
document.getElementById('uk').style.display = "none"; 
} 
function showDivUK() { 
document.getElementById('uk').style.display = "block"; 
document.getElementById('ireland').style.display = "none"; 
document.getElementById('canada').style.display = "none"; 
}'

https://jsfiddle.net/dave5000/0jwhwezq/

但是你可以看到我有什麼代碼。

我想將document.getElementById選擇器更改爲讓我選擇多個項目的其他東西。所以當我需要隱藏國家x/y/z時，我可以在一個區域輸入全部內容，而不必擁有多個getElementsBy選項。

任何幫助或建議將是偉大的。

來源

2017-03-20 DaveYme

使用「document.getElementsByClassName」或jquery（推薦） – blackmiaool

我已經測試過document.getElementsByClassName但它不工作。我檢查了DIV ID到DIV類。那是正確的嗎？ – DaveYme

@ user3546063，現在嘗試使用jsfiddle https://jsfiddle.net/0jwhwezq/1/。它應該工作。 – Ionut

添加一個公共類，每一個塊，即愛爾蘭替換此：

<div id="ireland" style="display:none;">

與此：

<div id="ireland" style="display:none;" class="countryblock">

鑑於所有塊都有一個共同的類，你可以使用以下功能：

function showDiv(id) { 
    // $(selector) is a shortcut for jQuery(selector) 
    $('.countryblock').hide(); // Hides every block with a table that is not currently hidden 
    $('#'+id).show(); // Shows one particular block you want to show 
}

，並調用它像：

showDiv('uk');

來源

2017-03-20 14:55:14

如果您採用這種方法，請確保您的頁面上包含[jQuery]（https://jquery.com/）（我在它的JSFiddle配置中看到它）。 – Will

當我嘗試這個我選擇愛爾蘭它顯示愛爾蘭。但是，當我將我的選擇更改爲英國時，會顯示愛爾蘭和英國。如果你從一個改變到另一個，你不應該看到舊的選擇。只有當前的一個。 – DaveYme

這意味着你沒有爲每個塊添加一個公共類。 –

您可以使用'getElementsByClassName'而不是'getElementById'。只需爲每個div添加一個類，例如國家

document.getElementsByClassName（ '國家'）

然後，您可以遍歷每個元素並設置樣式。

還有getElementsByTagName，如果你不想添加一個類，但是你必須用'dropdown'類過濾div。

來源

2017-03-20 14:52:20 Martina

Javascript元素類

回答

相關問題