JavaScript 不显示隐藏图片

Question

我对这种 JavaScript 方法有疑问。我只希望当我单击一个 link 时，它会显示隐藏的图片，当我再次单击它时它会隐藏它，依此类推。但它不能正常工作。这是代码自己检查它并尝试帮助我解决这个问题。

<head>
<style>
    .hide {
        display: none;
    }
</style>

</head>
<body>


<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a>

<img class='hide' id='sloth-pic' src='https://static-secure.guim.co.uk/sys-images/Education/Pix/pictures/2013/1/17/1358446759827/A-three-toed-tree-sloth-h-008.jpg' style='width:304px;height:228px;'>

 <script>

    var sloth = document.getElementById("sloth");
    var slothPic = document.getElementById("sloth");

    sloth.addEventListener("click", function() {
        if(slothPic.className === "hide") {
            sloth.className = "";
        } else if(sloth.className === ""){
            slothPic.className = "hide";
        }
    });

</script>
</body>

Answer 1

试试这个：https://jsfiddle.net/jorge182/cor14ze5/6/

    sloth.addEventListener("click", function() {

            if($('#sloth-pic').hasClass('hide')){

                $('#sloth-pic').removeClass('hide')
            }else{
               $('#sloth-pic').addClass('hide')
            }
        })

Answer 2

您在 JavaScript 中使用了错误的 id 属性。

您可以使用三元运算符使其切换。

试试这个：

var sloth = document.getElementById("sloth");
var slothPic = document.getElementById("sloth-pic");
sloth.addEventListener("click", function() {
  slothPic.className = (slothPic.className == "hide") ? "" : "hide";
});

.hide {
  display: none;
}

<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a>
<br>
<img class='hide' id='sloth-pic' src='https://static-secure.guim.co.uk/sys-images/Education/Pix/pictures/2013/1/17/1358446759827/A-three-toed-tree-sloth-h-008.jpg' style='width:304px;height:228px;'>

Answer 3

我认为你只是在使用 sloth 和 sloth-pic 时犯了一些错误。应该是这样的：

var sloth = document.getElementById("sloth");
var slothPic = document.getElementById("sloth-pic");

sloth.addEventListener("click", function() {
    if(slothPic.className === "hide") {
        slothPic.className = "";
    } else if(sloth.className === ""){
        slothPic.className = "hide";
    }
});

您可以在这里找到一个工作示例：

https://jsfiddle.net/nLn23r5j/

Answer 4

只需几行 Jquery 即可完成此操作，请参阅 fiddle https://jsfiddle.net/7oe5kh9L/55/

  $("#sloth").click(function() {
    $(".hide").toggleClass("show")
  });

css

.hide {display: none;}

.show {display: inline;}

Answer 5

如果您打算向图片添加更多类，请使用此代码。

var sloth = document.getElementById("sloth");
var slothPic = document.getElementById("sloth-pic");

sloth.addEventListener("click", function() {
  toggleClass(slothPic, 'hide');
  return false;
});

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

    .hide {
        display: none;
    }

<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a>

<img class='hide' id='sloth-pic' src='http://www.miamammausalinux.org/wp-content/uploads/2016/03/Whosebug2.png' style='width:304px;height:228px;'>

JavaScript 不显示隐藏图片

JavaScript not showing hidden picture

html

javascript

dom-events