如何使图像表现得像一个复选框并将其值发送到后端答案

【问题标题】：How to make image behave like a checkbox and send its value to backend如何使图像表现得像一个复选框并将其值发送到后端
【发布时间】：2020-08-27 14:18:34
【问题描述】：

我想制作一个像复选框的图像。（即图片是一个绿色的椅子图标，当你按下它时，它应该从绿色变为橙色，再次按下时，橙色变为绿色。）

以下代码部分工作，当您单击绿色图标时，它会变为橙色，但如果我再次单击以从橙色变为绿色，则没有任何反应，并且再次保持橙色

图片：

<table style="width:70%">
<tr>
<th>
<center>0</center>
<img src="images/chairgreen.png" id="1"  style="width:64px;height:64px;" onclick="if (src='images/chairgreen.png') { this.src='images/chairorange.png' } else if (src='images/chairorange.png') { this.src='images/chairgreen.png'}" >
</th>
</tr>

问题是onclick 方法，但我不知道如何解决它。而且我也不知道如何将椅子的id和颜色发送到后端。对于后端，我将使用 java spring。

【问题讨论】：

这真的很简单。试试这个 - geeksforgeeks.org/how-to-toggle-a-boolean-using-javascript

标签： javascript java html spring

【解决方案1】：

您可以尝试将类名定义为图像的颜色。然后你可以根据类名更改 src 属性。不要忘记在每次点击时更改类名。

function changeImg(img){
if(img.classList.contains("green")){
img.setAttribute("src","images/chairorange.png");
img.classList.remove("green");
img.classList.add("orange");
} 
else if(img.classList.contains("orange")){
img.setAttribute("src","images/chairgreen.png");
img.classList.remove("orange");
img.classList.add("green");
}
}

&lt;img src="images/chairgreen.png" id="1" class="green"  style="width:64px;height:64px;" onclick="changeImg(this)"&gt;

【讨论】：

【解决方案2】：

当您附加点击处理程序时，不要定义函数并运行多个语句。如果你有一个复杂的事情，写一个函数，然后触发那个函数。

<img src="images/chairgreen.png" id="1"  data-src="green" style="width:64px;height:64px;" onclick="change();" >

<script>
function change(e){
    const target = e.target;
    const current = target.getAttribute('data-src');
    switch(current){
      case "green":
        target.src= "images/chairorange.png";
        target.setAttribute('data-src',"orange");
          break;
        case "orange":
        target.src= "images/chairgreen.png";
        target.setAttribute('data-src',"green");
          break;
        default:
          console.error("error", e, current);
            break;
    } 
}

</script>

但是如果你是在脚本标签中编写，还不如在js中生成按钮

const img = document.createElement('img');
  img.setAttribute('src', "images/chairgreen.png")
  img.setAttribute('id', "1") // use an iterator
  img.setAttribute('data-src', "green");
  img.style.height ="64px";
  img.style.width = "64px";
  img.addEventListener('click', change);

如果你通过 js 生成元素，你还需要附加到 DOM。


const body = document.querySelector('body');
body.appendChild(img);

【讨论】：

【解决方案3】：

您正在比较 if，只有 1 个等号，您至少需要 2 个等号进行比较。

onclick="this.src = (this.src == 'images/chairgreen.png') ? 'images/chairorange.png' : 'images/chairgreen.png'"

【讨论】：