试图通过PHP/Javascript/HTML更改图像onclick

关于这一点，我已经看了很多其他答案，但还没有找到有效的解决方案。我正在使用一个PHP页面，其中包含一些HTML代码，Javascript使用一些函数。理想情况下，我会选择一个页面上的图像，图像将成为绿色，因为它被选中。然后我想取消选择图像并使其返回到原始状态。然而，我只能走到一半。我错过了什么？是邮递回来了吗

下面是一些代码示例：
HTML:

Javascript函数：

        function changeImage(var i){
            var img = document.getElementById("imgCh" + i + ".png");

            if (img.src === "images/Tooling/" + i + ".png"){
                img.src = "images/Tooling/" + i + "c.png";
            }
            else
            {
                img.src = "images/Tooling/" + i + ".png";
            }
        }`

---

“1c.png”图像是选中的图像，应替换为“1.png”。这个页面上有多个div，其中包含多个图像，它们被命名为2/2c、3/3c，这就是包含var i的原因。有什么见解吗？提前感谢。

您的问题是javascript正在返回

src

的完整路径（您可以尝试

警报（img.src）；

来验证这一点）

如果您想要最健壮的解决方案，可以查看如何解析文件路径以获取javascript中的文件名

但是，如果您确定所有图像都以“c.png”结尾，则可以使用最后5个字符的子字符串检查最后5个字符：

function changeImage(var i){
    var img = document.getElementById("imgCh" + i);

    if (img.src.substring(img.src.length - 5) === "c.png"){
        img.src = "images/Tooling/" + i + ".png";
    }
    else
    {
        img.src = "images/Tooling/" + i + "c.png";
    }
}

---

您可以这样做，它还允许使用不同的文件名

<img class="selectable" src="/images/Tooling/1.png"
                        data-original-source="/images/Tooling/1.png"
                        data-selected-source="/images/Tooling/1c.png">

<img class="selectable" src="/images/Tooling/2.png"
                        data-original-source="/images/Tooling/2.png"
                        data-selected-source="/images/Tooling/2c.png">

谨此陈辞：

// find all images with class "selectable"
var images = document.getElementsByClassName('selectable');

// add an event listener to each image that on click runs the "selectElementHandler" function
for (var image of images) {
  image.addEventListener('click', selectElementHandler);
}

// the handler receives the event from the listener
function selectElementHandler(event) {
  // the event contains lots of data, but we're only interested in which element was clicked (event.target)
  var image = event.target,
      currentSrc  = image.getAttribute('src'),
      originalSrc = image.getAttribute('data-original-source'),
      selectedSrc = image.getAttribute('data-selected-source'),
      // if the current src is the original one, set to selected
      // if not we assume the current src is the selected one
      // and we reset it to the original src
      newSrc = currentSrc === originalSrc ? selectedSrc : originalSrc;

  // actually set the new src for the image
  image.setAttribute('src', newSrc);
}

---

“.png”

不是元素的

id

的一部分。不要加上它；只需寻找

“imgCh”+i

。你说你只得到了一半是什么意思？您的元素ID不匹配（包括

.png

），并且您的图像源不同（从

/

开始，然后更改为相对位置），因此需要多次单击才能启动。此外，不要加载整个单独的图像，可以考虑在图像的顶部添加绿色过滤器，以降低网络使用。我可以在jQuery中更改吗？@ D.R.我没有意识到我从早期版本中复制了代码，其中包括了它通常不在ID中，并且已经被删除。很抱歉。我会将过滤器作为一种选择，我没有想到这一点。我很欣赏你的洞察力，谢谢你。谢谢你的详细回答，这正是我想要的。我也很感激你的失败！

// find all images with class "selectable"
var images = document.getElementsByClassName('selectable');

// add an event listener to each image that on click runs the "selectElementHandler" function
for (var image of images) {
  image.addEventListener('click', selectElementHandler);
}

// the handler receives the event from the listener
function selectElementHandler(event) {
  // the event contains lots of data, but we're only interested in which element was clicked (event.target)
  var image = event.target,
      currentSrc  = image.getAttribute('src'),
      originalSrc = image.getAttribute('data-original-source'),
      selectedSrc = image.getAttribute('data-selected-source'),
      // if the current src is the original one, set to selected
      // if not we assume the current src is the selected one
      // and we reset it to the original src
      newSrc = currentSrc === originalSrc ? selectedSrc : originalSrc;

  // actually set the new src for the image
  image.setAttribute('src', newSrc);
}