click change divの内容

Question

私は3つの画像を持っています。それぞれをクリックするごとに、それぞれの情報がワイン情報部にポップアップ表示されます。どうやってやるの？

<div class="wines"> 
      <div class="wine"> 
       <img src="img/wine1.png"> 
      </div> 
      <div class="wine"> 
       <img src="img/wine2.png"> 
      </div> 
      <div class="wine"> 
       <img src="img/wine3.png"> 
      </div> 
</div> 
<div class="wine-info"> 
</div> 

.wines { 
    display: table; 
    table-layout: fixed; 
    position: absolute; 
} 

.wine { 
    display: table-cell; 
} 

JSFiddle：https://jsfiddle.net/fovj2okL/

Answer 1

はID、次いで、例えば、対応するワイン情報をそれぞれのimgを与えます

<img id=wine1 src="img/wine1.png"/> 
<div id="info-wine1">Foo</div> 

はその後.wine-情報を与えるあなたのCSSに正しい情報をアクティブなクラス

$(".wine").click(function (e) { 
    $(".wine-info").removeClass("active"); 
    var foo = e.target.id; 
    $("#info-"+foo).addClass("active"); 
}); 

を与えるクリックハンドラを追加「表示：なし;」アクティブな "display：inline-block;"

それはそれを行う必要があります。お楽しみください

Answer 2

どこから来ているデータですか？ どこのデータであっても、DATAとしましょう。

HTML： "ワイン" のdivをクリックしたときに

... 
<div class="wine"> 
    <img src="" onclick="details(1);"/> 
</div> 
<div class="wine"> 
    <img src="" onclick="details(2);"/> 
</div> 
... 
<div id="wine-info"> 
</div> 

<script> 
function details(wineId) 
{ 
    //DATA = get contents based on wineId 
    document.getElementById("wine-info").innerHTML = DATA; 
} 
</script> 

Answer 3

私たちは、img要素のHTMLコンテンツを取得することができます。つまり、img要素のHTMLコンテンツをサブ要素として "wine-info" divに追加するだけです。

<div class="wine"> 
<img src="img/wine1.png"> 
</div> 
<div class="wine-info"> 
</div> 
<script> 
$(".wine").click(function() { 
$(".wine-info").empty();//empty the div content or you will get two img after second click 
var img=$(this).find("img").html(); 
$(".wine-info").append(img); 
}); 
</script>