用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>