Question

我需要创建一个toogle按钮HIDE / SHOW。当我按下它时，网站上的所有图像都必须消失，当我再按一次时，所有图像必须再次出现。

Answer 1

这是简短的代码示例。

点击该按钮后，检查body是否有class="hide"并添加/删除此课程。然后在CSS中是隐藏class="hide"的正文中的图像。

<style>
    .hide img {display: none}
</style>

<p>p</p>
<p>abc</p>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<button id="button">SHOW/HIDE</button>

<script>
    var button = document.getElementById('button');
    var body = document.body;

    button.onclick = function() {
        body.className = body.className == 'hide' ? '' : 'hide';
    }
</script>

https://jsfiddle.net/6ajr0e01/

这是没有框架的纯JS解决方案，没有迭代网站中的所有图像。它应该是（最快的）之一。

Answer 2

<input type="button" value="Toggle images" onclick="$('img').toggle();" />

那就是它！： - ）

修改我没有注意到你可能不想在jQuery中使用这个解决方案。遗憾。

Answer 3

您可以使用JQuery轻松完成此任务：

<input id='myinput'>Click to Toggle </input>

var status = "show";

$("#myinput").Click(function() {
    if (status == "show") {
        $('img').hide();
        status = "hide";
    } else {
        $('img').show();
        status = "show";
    }
});

使用JQUERY Toggle（从评论中获取建议）： JS Fiddle

    $(function () {
    $("button").click(function () {
        $("img").toggle();
    });
});

Answer 4

<强> HTML

<button>Toggle between hide() and show()</button>


<p>This is a paragraph.</p>

<强> JQuery的

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});

LINK：JSFIDDLE

Answer 5

var imageVisible = true;

var btn = document.getElementById('your_button_id');

btn.addEventListener('click', function () {
    var images = document.getElementsByTagName('img');
    if (imageVisible) {
        for (var i = 0; i < images.length; i++)
            images[i].style.display = 'none'
        imageVisible = false;
    } else {
        for (var i = 0; i < images.length; i++)
            images[i].style.display = 'inline'
        imageVisible = true;
    }
});

jsfiddle DEMO

Answer 6

这是一个工作版本 - 取自这个答案：Remove element by tag name

<img src="#" height="100" width="100" />
<br>
<img src="#" height="100" width="100" />
<br>
<button onclick="DeleteImages()">Delete all images</button>
<script type="text/javascript">
    function DeleteImages(){
        var element = document.getElementsByTagName("img");
        for (index = element.length - 1; index >= 0; index--) {
            element[index].parentNode.removeChild(element[index]);
        }
    }
</script>

隐藏/显示所有图像切换按钮

6 个答案: