jquery - 使用 jQuery 更改 CSS(图片)

Question

我知道已经有很多关于使用 jQuery 更改 CSS 的帖子，但我看不出我的错，我希望图像从一开始就隐藏起来，当您单击图像显示的菜单选项卡时向上。谢谢你! ;)

h1 {
  text-align: center;
}

.Menu {
  width: 550px;
  height: 18px;
  text-align: center;
  margin: 0 auto;
  
}

li {
  width: 100px;
  float: left;
  padding: 10px;
  display: block;
  background-color: green;
  margin: 0 auto;
  text-align: center;
  height: 18px;
}

ul {
  list-style-type: none;
  margin: 0 auto;
}

li:hover {
  color: cyan;
  background-color: pink;
  cursor: pointer;
}
body {
  background-color: cyan;
}

.image {
  text-align: center;
}

img {
  border: 4px solid black;
  border-radius: 25px;
visibility: hidden;
}

<h1> 29/12/'2016 </h1>
<div class="Menu">
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  </ul>
</div>
<br></br>
<div class="image">
<img src="https://www.google.be/images/branding/googleg/1x/googleg_standard_color_128dp.png" width= 200px alt="Smiley face"/>
</div>
<script>
$("document").ready(function(){
  
   $("li").on("click",function(){
  $('img[Smiley Face]').css("visibility","visible");   
});
    
  });

</script>

Answer 1

您的 jQuery 选择器不正确。你有:

$('img[Smiley Face]')

而您需要指定要选择的属性(并且区分大小写):

$('img[alt="Smiley face"]')

这是一种不常见的选择元素的方式，您最好给出 <img>一个 ID 或类并以这种方式定位它。示例:

HTML: <img id="smiley" src="image.jpg" />

jQuery: $('#smiley')

无论哪种方式，这是您已解决问题的代码段:

$("document").ready(function() {

  $("li").on("click", function() {
    $('img[alt="Smiley face"]').css("visibility", "visible");
  });

});

h1 {
  text-align: center;
}
.Menu {
  width: 550px;
  height: 18px;
  text-align: center;
  margin: 0 auto;
}
li {
  width: 100px;
  float: left;
  padding: 10px;
  display: block;
  background-color: green;
  margin: 0 auto;
  text-align: center;
  height: 18px;
}
ul {
  list-style-type: none;
  margin: 0 auto;
}
li:hover {
  color: cyan;
  background-color: pink;
  cursor: pointer;
}
body {
  background-color: cyan;
}
.image {
  text-align: center;
}
img {
  border: 4px solid black;
  border-radius: 25px;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> 29/12/'2016 </h1>
<div class="Menu">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<br><br>
<div class="image">
  <img src="https://www.google.be/images/branding/googleg/1x/googleg_standard_color_128dp.png" width=200px alt="Smiley face" />
</div>