Question

我正在制作一个不喜欢/喜欢的系统，当你点击图像输入后，当你喜欢或不喜欢屏幕上的内容时，它会显示出来。

我的问题是，例如：

当我点击竖起大拇指时，会显示LIKED消息，但我会点击缩略图，DISLIKED下会显示LIKED。

我希望如果我点击向下的拇指，LIKED消息就会消失，DISLIKED会出现。

function ai() {
  document.getElementById("liked").innerHTML = "LIKED";
}

function aii() {
  document.getElementById("disliked").innerHTML = "DISLIKED";
}

<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">

Answer 1

您只能创建1个元素并按照

进行操作

＆＃13;

function ai() {
  document.getElementById("message").innerHTML = "LIKED";
}

function aii() {
  document.getElementById("message").innerHTML = "DISLIKED";
}

＆＃13;

<h1 id="message"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">

＆＃13;

或者您可以改善您的代码，如下所示

＆＃13;

function ai() {
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
}

function aii() {
  document.getElementById("disliked").innerHTML = "DISLIKED";
  document.getElementById("liked").innerHTML = "";
}

＆＃13;

<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="tu.png" class="tu" onclick="ai()">
<input type="image" src="td.png" class="td" onclick="aii()">

＆＃13;

Answer 2

显示和隐藏 - 请注意类型=＆＃34;图像＆＃34;是表单内的提交按钮：

版本1：只有一个H1

＆＃13;

function ai(img) {
  console.log(img.className)
  document.getElementById("liked").innerHTML = img.className == "tu" ? "LIKED" : "DISLIKED";
  document.getElementById("liked").style.display = "block";
}

＆＃13;

.like {
  display: none
}

＆＃13;

<h1 class="like" id="liked"></h1>
<img src="tu.png" class="tu" onclick="ai(this)" />
<img src="tu.png" class="td" onclick="ai(this)" />

＆＃13;

第2版 - 两者都在页面上：

＆＃13;

function ai(img) {
  console.log(img.className)
  document.getElementById(img.className == "tu" ? "liked" : "disliked").style.display = "block";
  document.getElementById(img.className == "tu" ? "disliked" : "liked").style.display = "none";
}

＆＃13;

.like {
  display: none
}

＆＃13;

<h1 class="like" id="liked">LIKED</h1>
<h1 class="like" id="disliked">DISLIKED</h1>
<img src="tu.png" class="tu" onclick="ai(this)" />
<img src="tu.png" class="td" onclick="ai(this)" />

＆＃13;

Answer 3

function ai(temp) {
  if (temp == "1") {
    document.getElementById("Result").innerHTML = "LIKED";
  } else {
    document.getElementById("Result").innerHTML = "DISLIKED";
  }
}

<h1 id="Result"></h1>

<input type="image" src="tu.png" class="tu" onclick="ai(1)">
<input type="image" src="td.png" class="td" onclick="ai(0)">

在另一个函数运行后杀死一个函数

3 个答案: