Javascript 元素类

Question

我会尝试具体说明我正在尝试做的事情以及到目前为止我已经尝试过的事情。

我的任务是构建包含 200 个国家/地区的下拉菜单。选择国家/地区后，它将显示您选择的国家/地区可用的支付处理商。

我在这里工作(只有 3 个国家) http://davidstokes.com/1/payments/payments-dropdown.html我还将代码添加到 JS fiddle ，但由于某种原因不起作用，可能是外部文件未加载更正。

`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 选项。

任何帮助或建议都会很棒。

Answer 1

为每个 block 添加一个公共(public)类，即对于爱尔兰，将其替换为:

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

用这个:

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

鉴于所有 block 都有一个共同的类，您可以使用以下函数:

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');