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"]') 

これは、要素を選択する珍しい方法であり、あなたはより良いだろうIDまたはクラスを<img>に与え、それをそのようにターゲティングします。例：問題が解決して

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>