Question

我有一些动态显示在网页上的图像。这些图像是可点击的。当我点击其中一个图像时，我想在点击的图像上显示另一张图片。如果再次点击该图片需要删除。

当页面加载时，图像将显示如下所示，当我点击这些图像时，应显示我点击的图像上的另一张图片。截至目前，我能够在所选图像的一侧显示图像。这显示在第二张图片

Answer 1

你可以做的只是简单地为你的tr添加两个数据属性，这样你就可以拥有data-image1和data-image2，然后只需在鼠标点击时更改img src。

这是我的jsFiddle：https://jsfiddle.net/wLvn8yzx/

HTML

<img src="http://dreamatico.com/data_images/cat/cat-8.jpg" 
id="imageSwap" 
data-image1="http://dreamatico.com/data_images/cat/cat-8.jpg" 
data-image2="http://dressacat.com/chat.png">

的Javascript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.src == this.getAttribute("data-image1")) {
        this.src = this.getAttribute("data-image2");
    } else {
        this.src = this.getAttribute("data-image1");
    }
}

或者您可以使用类并设置样式并将背景设置为图像。这是另一个jsFiddle：https://jsfiddle.net/wLvn8yzx/1/

HTML

<div id="imageSwap" class="image1"></div>

的CSS

div{
    height:400px;
    width:400px;
}

.image1{
    background-image: url("http://dreamatico.com/data_images/cat/cat-8.jpg");
}

.image2{
    background-image: url("http://dressacat.com/chat.png");
}

Javacript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.className == "image1") {
        this.className = "image2";
    } else {
       this.className = "image1";
    }
}

更新

我创建了一个新的jsfiddle，它使用javascript函数来隐藏和显示交叉图像。

jsFiddle：https://jsfiddle.net/wLvn8yzx/2/

HTML

<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" class="imageSwap image1">
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/f/ff/20150316142725!Solid_blue.svg/120px-Solid_blue.svg.png" class="imageSwap image2">
<img onclick="javascript:imageSwapper()" src="https://s2.graphiq.com/sites/default/files/2307/media/images/t/Green-Yellow_429842_i0.png" class="imageSwap image3">
<img id="crossImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Red_Cross.svg/120px-Red_Cross.svg.png" class="hidden">

CSS

.hidden{
    display: none;
}

.show{
    display: inline;
}

Javascirpt

function imageSwapper() {
    var crossImage = document.getElementById("crossImage");
    if (crossImage.className == "hidden") {
        crossImage.className = "show";
    } else {
        crossImage.className = "hidden"
    }
}

Answer 2

您可以尝试使用jQuery，并且您希望所有select m.* from message_log m where m.from_id <> ? and m.to_id = ? and m.unix_timestamp = (select max(unix_timestamp) from message_log where match_id = m.match_id group by match_id)共享同一个类。在我的示例中，我使用了CREATE INDEX message_log_from_id_to_id_match_id_unix_timestamp_idx ON message_log USING btree (from_id COLLATE pg_catalog."default", to_id COLLATE pg_catalog."default", match_id COLLATE pg_catalog."default", unix_timestamp);。

HTML：

<td>

CSS：

"dynamic-image"

jQuery的：

    <table>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
       <tr>
          <td class="dynamic-image"></td>
       </tr>
    </table>

在这里查看我的jsFiddle：http://jsfiddle.net/mdeang2/eyts25nh/1/

如何显示图片

2 个答案: