个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我只是想知道是否有人可以指出我哪里出错了..这里我有一小段代码，我想用它来根据 onclick 事件在两个图像之间切换。但是，单击图像后没有任何反应。我在成功触发的点击功能中放置了一个警报；但是，当在 if 语句中放置警报时，不会触发任何警报。我搞砸了什么？
HTML:
<html>
<head>
<link href="../CSS/209.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="trim">green209green209green209</div>
<h1 align="right">about House Felice</h1>
<center>
<img src="../Images/fakevid.png" width="70%" height="48%"><img src="../Images/videonav1.png" width="25%" height="48%">
<div id="wrapper">
<div id="kitchen" align="left">
<img id="pricetile1" src="../Images/kitchen.png">
<img id="pricetile2" src="../Images/french.png" data-price="100" />
<img id="pricetile3" src="../Images/german.png" data-price="200" />
</div>
<div id="floor" align="left">
<img id="pricetile1" src="../Images/floors.png">
<img id="pricetile4" src="../Images/mixed.png" data-price="300">
<img id="pricetile5" src="../Images/allwood.png" data-price="400">
</div>
<div id="energy" align="left">
<img id="pricetile1" src="../Images/energy.png">
<img id="pricetile6" src="../Images/green.png" data-price="500">
<img id="pricetile7" src="../Images/standard.png" data-price="600">
</div>
</div>
<div id="price"><p>total: $<span id="total">0.00</span><p></div>
<div id="next"> <p>next house</p></div>
JavaScript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
$('#pricetile2').click(function(){
console.log(document.getElementById("pricetile2").src);
if (document.getElementById("pricetile2").getAttribute('src') == "../Images/french.png" )
{
document.getElementById("pricetile2").getAttribute('src') = "../Images/french2.png";
console.log(1);
}
else
{
document.getElementById("pricetile2").getAttribute('src') = "../Images/french.png";
console.log(2);
}
});
var container = document.getElementById('wrapper');
var lines = container.children;
var numLines = lines.length;
document.addEventListener('click', function(e) {
if (e.target.tagName == 'IMG' && container.contains(e.target)) {
var selected = e.target.parentNode.getElementsByClassName('selected');
if (selected.length)
selected[0].className = selected[0].className.replace('selected', '');
e.target.className = 'selected';
var total = 0;
for (var i = 0; i < numLines; i++) {
var selected = lines[i].getElementsByClassName('selected');
if (selected.length)
total = total + Number(selected[0].dataset.price);
}
document.getElementById('total').innerHTML = Number(total).toFixed(2);
}
}, false);
document.getElementById("calc").innerHTML = x;
</script>
最佳答案
console.log(document.getElementById("pricetile2").src);
显示图像的完整 url 而不是相对路径。例如。它不是../Images/french.png，而是http://fiddle.jshell.net/Images/french.png (参见 http://jsfiddle.net/klickagent/wr01jxmb/)
因此您需要检查 if 语句中图像的完整 url。
正如 Barmar 所写:使用
document.getElementById('pricetile2').getAttribute('src');
这为您提供了相对路径(src 标记中的确切值)
关于Javascript - 如果语句不改变图像 src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30386293/
25
4
0
我正在尝试使用 jquery 获取图像 src，如下所示: HTML Javascript var imageSrc = $('.post_container img').attr('s
我遇到错误，无法完成构建。我搜索了 Stackoverflow 和 Github。我已经尝试了很多方法，但我无法修复。请帮忙。 (1) 在 [src/nullnull/debug, src/debug
我正在尝试使用图像制作一款类似 Match3 的游戏，但我无法进行比较。我正在为固定数量的 atm 执行此操作，只是为了让它正常工作，稍后应该在 foreach 循环中。如果有什么区别的话，该函数位于
我正在使用 jquery 插件 OwlCarousel，在我的一个 View 中使用 ng-repeat 场景，如下所示: 它运行良好，并为轮播中的每个项目输出以下标记: 有没
我的代码如下所示: Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.image1); int wi
如果未找到 src，我将使用 Angular 指令作为后备 url 作为名称首字母 指令 (function () { 'use strict'; angular .m
我是构建 chrome 扩展的新手，从一个小项目开始，我需要在弹出窗口中打印“构建版本”。构建版本被附加到 JS/CSS 资源中，如下所示: 需要从脚本 src 值中提取“6.0”。你能帮我看看如何
类型‘AbstractControl’上不存在属性‘Controls’。
这个tutorial演示如何使用指令 ngSrc 而不是 src : 他们要求: Replace the ng-src directive with a pl
我正在创建一个包含多个图像的图库，您可以在其中单击一个小缩略图，然后将打开该图像的更大版本。 打开后，如果您移动光标，图像将在 y 轴上跟随您。类似于 https://www.zara.com/es/
文档[] src.charAt src.length 这三样东西是什么？ 我确定 pixState 会给我 1 或 0； var pixState = document[imgName].src.ch
问题背景: 我正在使用这个问题的解决方案:How to update AngularJS view when the value has not changed?所以在我看来我有: 当我更改照片时
我在 html 中有整个页面，在输出之前我想将所有 img src 替换为 data-src我正在使用 return (preg_replace('~]*\K(?=src)~i','data-',
Difference(s): android:src and tools:src? 如果有的话，什么时候使用 tools:src 而不是 android:src 是合适的？ 最佳答案 如果您在运行时在
我需要检查每个 script 标签的 src 值，如果匹配，我想更改该脚本标签的 src 属性...像这样: var scripts = document.getElementsByTagName("
使用 img 标签的 data-src 或 src 属性有什么区别和后果(好的和坏的)？我可以使用两者获得相同的结果吗？如果是这样，应该什么时候使用它们？ 最佳答案 属性 src 和 data-src
我使用 Vue。我尝试输出图像，当我使用 src 时效果很好，但当我使用 :src 时效果不佳。 作品 不起作用 我试过但没有用 @ 在路径的第一个。 ~ 路径中的第一个。 ./ 在路径的第一个。
在当前项目中我正在使用 jQuery。我只是想知道为什么会这样， $('#homeIcon').hover(function(){ document.getElementById('homeI
我在严格的 Java 环境中。 所以这个问题并不像标题中那么简单，我不是要解决我遇到的问题，它更理论化，以获得更好的知识。 我感兴趣的是用双引号或单引号匹配 src，但如果是双引号，它也必须用双引号结
我有一个 Joomla 2.5.28，现在使用 https 而不是 http。 一些文章(很多)包含来自 Vimeo 的嵌入视频。 最初，这些视频是使用http嵌入的，所以现在我的数据库中有字段int
我是一名优秀的程序员,十分优秀！