显示/隐藏切换功能，多个按钮在javascript中不起作用

我对javascript非常陌生，刚刚编写了我的第一个脚本。脚本的要点是通过单击按钮在屏幕上切换div，同时根据div是否可见将按钮上的文本从show更改为hide

当我把一个按钮放在页面上时，一切都很好。但是，当我向页面添加第二个按钮时，第一个按钮仍然有效，但第二个按钮不起作用

如何添加多个按钮并让脚本处理它们？我需要按钮来生成隐藏/显示文本，我需要它在ie7+中工作，而不需要jquery

var show = "show";
var hide = "hide";
var selector = document.getElementById('toggleCost');
var optionA = document.createTextNode(show);
var optionB = document.createTextNode(hide);
var targetClassCost = document.querySelector('.cost');

// determines the text, inside the element 
function textChange () { 

    if (targetClassCost.style.visibility === 'visible') {
        selector.appendChild(optionB);

    } else {
        selector.appendChild(optionA);  
    }

}

// toggles the text of the button when clicked
function toggle() {  

if (targetClassCost.style.visibility === 'visible') {
    targetClassCost.style.visibility = 'hidden';

} else {
    targetClassCost.style.visibility = 'visible';
}

    if (selector.innerHTML === show) {
        selector.innerHTML = hide;

    } else {
        selector.innerHTML = show;
    }

}
// calls the function that changes the text inside the element and inserts taht text into the button
selector.onclick = function () {toggle()};
textChange(); 

这是小提琴：

非常感谢您的帮助

因此，这里的区别在于，您可以抽象函数，以便将其应用于任何按钮，从而允许它切换可见性，并在每次单击时通过传递元素更改其文本

这样做的问题是，当多个按钮试图控制同一元素的可见性时，它们不会“侦听”可见性更改并将文本更改传播给它们

我注意到您有

textChange（）

函数，它实际上只用于设置按钮的初始文本值，我们可以通过删除此函数并在html级别设置默认按钮文本来减少代码，以备首次单击

如果我们希望这是尽可能可扩展的，让我们看看创建一个函数，它允许我们传递可点击的项目和点击处理程序的切换所影响的项目

var show = "show";
var hide = "hide";

var toggledSelectorClass = 'cost'; // class of element(s) to be hidden/shown
var togglerSelectorClass = 'toggleCost'; // class of element(s) to be clicked

function attachToggleVisibilityHandler(togglerClass, toggledClass){
    // finds all elements with matching class
    // note that getElementsByClassName is not supported in IE8
    // http://caniuse.com/#feat=getelementsbyclassname
    var togglers = document.getElementsByClassName(togglerClass);
    var toggled = document.getElementsByClassName(toggledClass);

    // assigns the click event handler to each button with matching class
    for(var x = 0; x < togglers.length; x++){
        togglers[x].onclick = function(){
            toggleCostVisibility(togglers, toggled);
        }
    }
}

// toggles the visibility of the element(s)
function toggleVisibility(togglers, toggled) {
    for(var x = 0; x < toggled.length; x++){
        if (toggled[x].style.visibility === 'visible') {
            toggled[x].style.visibility = 'hidden';
        } else {
            toggled[x].style.visibility = 'visible';
        }
    }
    toggleTextOnMatchingClassNames(togglers);
}

// changes the text of all buttons with matching class
function toggleTextOnMatchingClassNames(togglers){
    for(var x = 0; x < togglers.length; x++){
        if (togglers[x].innerHTML === show) {
            togglers[x].innerHTML = hide;            
        } else {
            togglers[x].innerHTML = show;
        }
    }
}

attachToggleVisibilityHandler(togglerSelectorClass, toggledSelectorClass);

var show=“show”；
var hide=“hide”；
var toggledSelectorClass=‘成本’；//要隐藏/显示的元素类别
var-togglerSelectorClass='toggleCost'；//要单击的元素的类别
函数attachToggleVisibilityHandler（togglerClass、toggledClass）{
//查找具有匹配类的所有元素
//请注意，IE8中不支持getElementsByClassName
// http://caniuse.com/#feat=getelementsbyclassname
var togglers=document.getElementsByClassName（togglerClass）；
var toggled=document.getElementsByClassName（toggledClass）；
//将单击事件处理程序分配给具有匹配类的每个按钮
对于（var x=0；x

---

这样做的本质是允许您拥有多个

.cost

元素（“切换”元素）和多个

.toggleCost

元素（“切换”元素{s}），它们彼此保持同步

您正在开始设置选择器

var selector=document.getElementById（'toggleCost'）您需要抽象函数以接受变量选择器HMMM ok。你能告诉我在哪里可以找到正确的方向吗？我做了一些搜索，从外观上看，我需要创建一个对象，但我仍然不确定这是否是你建议我做的。看起来你的JSFIDLE不再工作了，你介意把它放回去吗，我会给你一些提示：）是的，谢谢你指出这一点！这里是新的链接。令人惊叹的！今晚我会检查一下，然后试一试。我注意到您使用的for（）循环在很多脚本中都非常常见。这是否会在dom中循环以查找您试图查找的所有选择器？它不是遍历dom的
for（）
循环。行
document.getElementsByClassName
是DOM遍历器。然后，它将所有找到的元素存储在它指定给的变量中。因为类可以分配给多个元素，所以我需要适应
getElementsByClassName
函数返回一个元素数组而不是一个元素数组的可能性。因此，我们循环遍历结果如果我们知道我们只想处理单个元素，我们将在元素上使用
id
而不是
class
，并使用
getElementById
（正如您最初所做的那样），从而在对其返回的结果执行操作时不需要使用
for（）
循环（我们知道它只返回1个元素）我去了小提琴，按钮没有切换，我把代码放到ide中，控制台上没有出现错误。你介意最后看一眼这是怎么回事吗？我也注意到[x]在代码中。你能给我解释一下这是怎么回事吗？@David抱歉，这是我打字的错误，现在正在工作。
x
是一个计数器（for

循环的

每次循环都会增加它的数量）。我使用
x
来定位数组中的
x
第项。因此，它第一次循环时会查找[0]，然后是[1]，然后是[2]等等。