Question

我在两张图片上附加了onclick事件。我想为每个图像显示不同的消息。如何创建一个if / else语句来显示一条消息＆＃34;你喜欢这只猫！＆＃34;如果一张图片被点击而另一张图片被点击了＃34;你不喜欢这只猫！＆＃34;

<img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
    <img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"></img>
    <img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile();"></img>
    <img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile();"></img>
    <p id="display_message"></p>

function hide_profile() {
    document.getElementById("profile_pic").style.visibility = "hidden";
}

function show_profile() {
    document.getElementById("next_profile").style.display = "block";
    document.getElementById("next_profile").style.visibility = "visible";
    document.getElementById("profile_pic").style.display = "none";

    document.getElementById("display_message").innerHTML = "You Liked this Cat!";
}

Answer 1

在HTML元素中，您可以传递其ID

<img onclick="functionName(this.id)">

在Javascript中：

function functionName(clicked_id){
    if(clicked_id == "cat"){
        ...
    }
}

Answer 2

您可能需要为图片代码添加一些属性（例如id或rel），并为它们分配一些唯一值，以便您可以识别它的onclick事件处理程序并相应地显示消息。

或者更确切地说使用onclick函数传递一些参数。

我提供与jQuery一起使用的代码压缩。

<IMG SRC='IMG1.jpg' id='1' onclick='updatepic(1)'>

Javascript功能

function updatepic(id) {
if(id==1) {
//change the innerhtml for pic 1
}
else {
//change the innerhtml for pic 2
}
}

Answer 3

将文字传递给show_profile功能。

试试这段代码：

function hide_profile() {
  document.getElementById("profile_pic").style.visibility = "hidden";
}

function show_profile(message) {
  document.getElementById("next_profile").style.display = "block";
  document.getElementById("next_profile").style.visibility = "visible";
  document.getElementById("profile_pic").style.display = "none";

  document.getElementById("display_message").innerHTML = message;
}

<img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
<img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"></img>
<img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile('You Liked this Cat!');"></img>
<img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile('You Didn\'t Like this Cat!');"></img>
<p id="display_message"></p>

Javascript：目标图像ID以显示消息

3 个答案: