show() 和 toggle() 没有按预期工作

Question

b1 hides the image while b2 doesn't show it. Also the toggle function does not work? What is wrong in my code?

$(document).ready(function() {
  $(".b1").click(function() {
    $("img").hide();
  });

  $(".b2").click(function() {
    $("img").show();
  });     
});

Answer 1

Without the code it is impossible to give the right answer. If I assume that everything is good with the HTML and CSS, I would do something like this:

$(document).ready(function() {

var imgOne = $(".b1");
var imageTwo = $(".b2");

var imgClass = $(".img-class");


  imgOne.on("click",function() {
    imgClass.hide();
  });

  imageTwo.on("click",function() {
    imgClass.show();
  });     
});

You can also add console.log('pass') when you click to see if the functions are even doing something. Like this:

$(document).ready(function() {

var imgOne = $(".b1");
var imageTwo = $(".b2");

var imgClass = $(".img-class");


  imgOne.on("click",function() {
    console.log('pass hide');
    imgClass.hide();
  });

  imageTwo.on("click",function() {
    console.log('pass show');
    imgClass.show();
  });     
});

You should see these prints in the console if everything works ok. Try it out. Hope this helps:)