Javascript document.getElementById('').src == ??? （等于失败）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3966130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById('').src == ??? (is equal to FAIL)
提问by jsejcksn
My javascript is
我的 javascript 是
function changeImage(imgID) {
var baseurl = "media/images/";
if (document.getElementById(imgID).src == baseurl+"selection-off.png") {
alert('Success');
document.getElementById(imgID).src = baseurl+"selection-no.png"; }
else {
alert('Fail'); } }
and my HTML is
我的 HTML 是
<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div>
I always get Fail when clicking the image. I must be missing something really elementary.
单击图像时我总是失败。我一定错过了一些非常基本的东西。
采纳答案by Gabriele Petrioli
Some browsers convert the imgsrc to the full url (including http://www....)
一些浏览器将imgsrc转换为完整的 url（包括http://www....）
try alerting it to make sure..
尝试提醒它以确保..
You could use the
你可以使用
document.getElementById(imgID).src.indexOf( baseurl+"selection-off.png" ) >= 0
which checks if one string is contained in the other..
它检查一个字符串是否包含在另一个字符串中。
回答by Thariama
I tried your code on my own server.
我在我自己的服务器上试过你的代码。
Result:
结果：
document.getElementById(mustard-img).srcis
'http://localhost/webfiles/media/images/selection-off.png'
document.getElementById(mustard-img).src是 'http://localhost/webfiles/media/images/selection-off.png'
baseurl+"selection-off.png"is 'media/images/selection-off.png'
baseurl+"selection-off.png"是 ' media/images/selection-off.png'
baseurl seems to show the relative url only. So that is the reason why "Fail" gets alerted.
baseurl 似乎只显示相对 url。所以这就是“失败”收到警报的原因。
回答by Chinmayee G
Alert string document.getElementById(imgID).src. It might be taking complete path i.e. including host name while the string you are comparing with has relative path.
警报字符串 document.getElementById(imgID).src。它可能采用完整路径，即包括主机名，而您正在比较的字符串具有相对路径。
回答by Mic
Try with the following code:
尝试使用以下代码：
<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage(this)" /></div>
<script>
function changeImage(img) {
if (img.src.indexOf('selection-off.png')) {
alert('Success');
img.src.replace(/selection-off.png/, 'selection-no.png');
}else{
alert('Fail');
}
}
</script>
The differences with your code:
与您的代码的差异：
- passing the img reference:
thisinstead of the id in the onclick function - use
indexOfinstead of ==, for relative paths
- 传递 img 引用：
this而不是 onclick 函数中的 id - 使用
indexOf而不是 ==，用于相对路径
回答by Fenton
Image-based checkboxes are quite common, but here is the full solution.
基于图像的复选框很常见，但这里是完整的解决方案。
1) Render actual checkboxes first. These work for 100% of browsers.
1) 首先渲染实际的复选框。这些适用于 100% 的浏览器。
2) When the page loads, place your "image checkbox" next to the checkbox and hide the checkbox
2）页面加载时，将“图像复选框”放在复选框旁边并隐藏复选框
3) When the image is clicked, toggle the checkbox and use the hidden checkbox to ascertain the state of the image.
3) 单击图像时，切换复选框并使用隐藏的复选框来确定图像的状态。
When the form is POST-ed, the checkboxes will act like normal checkboxes. If JavaScript is disabled or otherwise not available the form is still usable.
当表单被发布时，复选框将像普通复选框一样工作。如果 JavaScript 被禁用或以其他方式不可用，表单仍然可用。
回答by Manny
It's because the src attribute is changed by the browser. Don't do it that way, the proper way to check and change the css class or style attribute instead.
这是因为浏览器更改了 src 属性。不要那样做，而是检查和更改 css 类或样式属性的正确方法。
回答by MatTheCat
Are you sure the DOM is built when the script is loaded ?
您确定 DOM 是在加载脚本时构建的吗？
