Question

我对javascript很新，只是编写了我的第一个脚本。脚本的要点是只需单击一个按钮即可在屏幕上切换div，同时将按钮上的文本从显示更改为隐藏，具体取决于div是否可见。

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

如何添加多个按钮并让脚本处理它们？我需要按钮来生成隐藏/显示文本，我需要这个工作在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();

这是小提琴：

http://jsfiddle.net/dodey/Lexruaou/

非常感谢任何帮助！

Answer 1

<强> JSFiddle DEMO

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

问题在于，如果有多个按钮试图控制同一元素的可见性，那么它们就不会“监听”可见性变化并将文本更改传播给它们。

我注意到你有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);

这基本上可以让你拥有多个.cost元素（“切换”元素）和多个.toggleCost元素（“toggler”元素{s}）彼此同步。

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

1 个答案: