Question

我有三个图片，点击每个图片，每个图片的信息都应该在wine-info div中弹出。我怎么能这样做？

<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

给每个img一个ID，然后给相应的葡萄酒信息，例如

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

然后添加一个单击处理程序，它将正确的信息提供给活动类

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

你的CSS中的

给.wine-info＆＃34; display：none;＆＃34;和.active＆＃34; display：inline-block;＆＃34;

那应该这样做。享受

Answer 2

数据来自哪里？无论数据在哪里，我们都称之为DATA。

HTML：

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

单击“wine”div时，我们可以获取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>

点击更改div内容

3 个答案: