Javascript 通过仅单击一个按钮隐藏/显示元素

正确知道代码工作得很好，但我真正想要的是使带有文本“hide”的按钮将文本更改为“show”，但只有在我单击带有文本“hide”的按钮后，文本内容才会隐藏，并且只保留带有文本“show”的按钮当我单击show时，我希望代码再次显示

window.onload=function（）{
var listItems=document.queryselectoral（“#myList li”）；
对于（变量i=0；i




作者：泽卡

129702次浏览-2个月前
隐藏



作者：KSI

176977-3个月前
隐藏



作者：MM7GAMES

135782-4个月前
隐藏



作者：W2S

5个月前的104169次浏览
隐藏



作者：TBJZL

6个月前的181137次浏览
隐藏


对于不断变化的文本，为什么不使用Inner.html

比如把
this.innerHTML='Show'
在
项中。querySelector（“.hide”）。onclick
函数

或者包含Jquery以使用.html（）
对于更改的文本，为什么不使用Inner.html

比如把
this.innerHTML='Show'
在
项中。querySelector（“.hide”）。onclick
函数

或者包含Jquery以使用.html（）

隐藏元素并使用值“false”再次显示该元素。我会为show和hide创建一个函数，这样您就可以在.onclick中调用该函数，从而使您的生活更加简单。

我会为要切换隐藏或可见的元素添加一个“隐藏”属性（即

），然后使用

元素.setAttribute（“隐藏”，true）

隐藏元素并使用值“false”再次显示该元素。我会为show和hide创建一个函数，这样您就可以在.onclick中调用该函数，从而使您的生活更加简单。

我想您需要这样的功能

$（“#切换按钮”）。打开（'单击'，函数（）{
if（$（this）.val（）=='show'）
$（this.val（'hide'）；
其他的
$（this.val（'show'）；
$（'#some div'）.toggle（）；
});

一些文本
我想你想要这样的东西


$（“#切换按钮”）。打开（'单击'，函数（）{
if（$（this）.val（）=='show'）
$（this.val（'hide'）；
其他的
$（this.val（'show'）；
$（'#some div'）.toggle（）；
});

一些文本
我知道你想要什么。您希望内容相应地
隐藏
或
显示
，并且
按钮的文本相应地为“隐藏”或“显示”。我说得对吗？如果是，那么我已经创建了一个JSFIDLE，请检查它，它正在工作-

我知道你想要什么。您希望内容相应地
隐藏
或
显示
，并且
按钮的文本相应地为“隐藏”或“显示”。我说得对吗？如果是，那么我已经创建了一个JSFIDLE，请检查它，它正在工作-

尝试使用一点CSS让你的生活更轻松


window.addEventListener（“加载”，函数（）{
var listItems=document.queryselectoral（#myList>li）；
Array.prototype.forEach.call（listItems，函数（item）{
item.querySelector（“.hide”）.addEventListener（“单击”，函数（）{
item.classList.toggle（“隐藏”）；
如果（this.textContent==“隐藏”）{
this.textContent=“Show”；
}否则{
this.textContent=“Hide”；
}
});
});
});
.hidden:不是（.hide）{
显示：无；
}



作者：Zerkaa
129702次浏览-2个月前


作者：KSI
176977-3个月前


作者：MM7GAMES
135782-4个月前


By:W2S
104169五个月前的视图隐藏


作者：TBJZL
181137六个月前的浏览量


尝试使用一点CSS让你的生活更轻松


window.addEventListener（“加载”，函数（）{
var listItems=document.queryselectoral（#myList>li）；
Array.prototype.forEach.call（listItems，函数（item）{
item.querySelector（“.hide”）.addEventListener（“单击”，函数（）{
item.classList.toggle（“隐藏”）；
如果（this.textContent==“隐藏”）{
this.textContent=“Show”；
}否则{
this.textContent=“Hide”；
}
});
});
});
.hidden:不是（.hide）{
显示：无；
}



作者：Zerkaa
129702次浏览-2个月前


作者：KSI
176977-3个月前


作者：MM7GA
item.querySelector(".hide").onclick = function (e) {
    if(this.innerText == "Hide"){
        this.innerText="Show";
    var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

    img.style.display = "none";
    header.style.display = "none";
    elemA.style.display = "none";
    elemP.style.display = "none";
    span.style.display = "none";
    }
    else{
        this.innerText="Hide";
    var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

    img.style.display = "inline";
    header.style.display = "block";
    elemA.style.display = "block";
    elemP.style.display = "block";
    span.style.display = "inline";
    }
};

var btns = toArray(document.getElementsByClassName('hide'));

btns.forEach(function (x) {
    var ele = x.parentElement.querySelector('.cont');
    var style = ['block','none'],
        text = ['Hide', 'Show'],
        n = 0;
    x.addEventListener('click', function (e) {
        n = (n==1)?0:1;
        x.innerText = text[n];
        ele.style.display = style[n];
    });

});


function toArray(x) {
    var arr = [];
    for (var i = 0; i < x.length; i++) arr.push(x[i]);
    return arr;
}

var text = ['Hide', 'Show'];

$('button[class="hide"]').click(function () {
    var t = $(this);
    t.siblings('.cont').toggle();
    t.text(text[(text.indexOf(t.text()) + 1) % text.length]);
});