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

我看了很多关于此问题的其他答案，但还没有找到一个有效的解决方案。我正在使用一个包含一些HTML代码的PHP页面，并使用Javascript来执行某些功能。理想情况下，我会选择页面上的图像，图像将在选中时变成绿色。然后，我想取消选择图像并使其恢复到原始状态。然而，我只能在中途停下来。我错过了什么？是否回帖？试图通过PHP/Javascript/HTML更改一个图像onclick

下面是一些代码的例子：
的HTML：
<div onclick="changeImage(1)" id="toolDiv1"><img id="imgCh1" src="/images/Tooling/1.png"></div>

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所述一个巴纽”。这个页面上有多个div可以容纳多个图像，它们被命名为2/2c，3/3c，这就是为什么var i被包含在内。任何见解？提前致谢。

来源

2017-05-16 xnnxn

' “png格式”'是不是该元素的'id'的一部分。不要添加它;只要查找'“imgCh”+ i'。 –

你是什么意思，你只是半途而废？您的元素ID不匹配（您包含'.png'），并且您的图片源不同（以'/开头，然后更改为相对位置），因此需要多次点击才能启动。此外，您可以考虑在图片的顶部添加一个绿色滤镜以减少网络使用，而不是加载完整的单独图片。 –

我可以在jQuery中进行更改吗？ – Rahul

你可以这样做，它也会允许不同的文件名。

<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">

var images = document.getElementsByClassName('selectable'); 

for (var image of images) { 
    image.addEventListener('click', selectElementHandler); 
} 

function selectElementHandler(event) { 
    var image = event.target, 
     currentSrc = image.getAttribute('src'), 
     originalSrc = image.getAttribute('data-original-source'), 
     selectedSrc = image.getAttribute('data-selected-source'), 
     newSrc = currentSrc === originalSrc ? selectedSrc : originalSrc; 

    image.setAttribute('src', newSrc); 
}

搭配点评：

// 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); 
}

来源

2017-05-16 19:09:25 JimL

谢谢你的详细答案，这正是我正在寻找的。我也很欣赏细分！ – xnnxn

你的问题是，JavaScript正在返回src的完整路径（你可以试试alert(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"; 
    } 
}

来源

2017-05-16 18:32:04 RToyo

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

回答

相关问题