Question

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

我的任务是建立一个有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选项。

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

Answer 1

为每个块添加一个公共类，即爱尔兰替换它：

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

Answer 2

您可以使用＆＃39; getElementsByClassName＆＃39;而不是＆＃39; getElementById＆＃39;。只需为每个div添加一个类，例如国家

document.getElementsByClassName（＆＃39;国家＆＃39）

然后，您可以遍历每个元素并设置样式。

如果您不想添加课程，还有getElementsByTagName，但是您必须使用＆＃39; dropdown＆＃39;来过滤div。类。

Javascript元素类

2 个答案: