Question

我创建了这个简单的JavaScript代码，允许用户点击元素，然后向用户显示隐藏的内容。

但是现在我的代码允许用户点击所有元素并同时显示所有元素。

我想知道是否有人能把我推向正确的方向？

var hellos = function(){
    var divClicks = document.getElementsByClassName("clickToShow");
    for(i=0; i < divClicks.length; i++){
        var click = divClicks[i];

        var close = function(){
            var open = false;

            click.addEventListener("click", function(e){
            e.preventDefault();
                if(open){
                    this.childNodes[3].setAttribute("class", "hidden");
                    open = false;
                } else {
                    this.childNodes[3].setAttribute("class", "show");
                    open = true;
                }
            },false);
        }();
    }
}();

Answer 1

试试这个：http://jsfiddle.net/MTJa5/22/

Answer 2

当你展示任何一个元素时，你需要通过其他div并隐藏它们的元素。

编辑：看到这个小提琴： http://jsfiddle.net/spb_/MTJa5/25/

Answer 3

嗨，哥们经历了你的小提琴工作并找到了以下解决方案..

这是一个完整的javascript，你的小提琴修改::

var hellos = function(){
    var divClicks = document.getElementsByClassName("clickToShow");
    for(i=0; i < divClicks.length; i++){
        var click = divClicks[i];


        var close = function(){
            var open = false;
            click.addEventListener("click", function(e){
                var divVisible= document.getElementsByClassName("show");
        //alert(divVisible.length);
        for(j=0; j < divVisible.length; j++){
            divVisible[j].setAttribute("class", "hidden");
        }

            e.preventDefault();
                if (open){
               this.childNodes[3].setAttribute("class", "hidden");
                    open = false;
                }else{
                    this.childNodes[3].setAttribute("class", "show");
                    open = true;
                }

            },false);
        }();
    }
}();

这是解释::

在您的点击事件中，我找到了class=show和

中的所有div元素

for loop我再次设置了class=hidden然后让代码处理这些内容，点击时显示相应的div

在JavaScript中，我如何一次只显示一个元素

3 个答案: