Question

我只是想知道是否有人可以向我指出我哪里出错了.. 在这里，我有一小段代码，我想根据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>

Answer 1

console.log(document.getElementById("pricetile2").src);

显示图像的完整网址而不是相对路径。例如。它不是../Images/french.png，但http://fiddle.jshell.net/Images/french.png（见http://jsfiddle.net/klickagent/wr01jxmb/）

因此，您需要在if语句中检查图像的完整URL。

正如Barmar所写：使用

document.getElementById('pricetile2').getAttribute('src');

这为您提供了相对路径（src标记中的确切值）

Answer 2

此代码最快的变化是更改

if (document.getElementById("pricetile2").src == "../Images/french.png")

到

if (document.getElementById("pricetile2").src.indexOf("Images/french.png") >= 0)

或

if (document.getElementById("pricetile2").getAttribute("src") == "../Images/french.png")

因为无法像第一次尝试那样直接比较相对网址。（2号信用是Barmar）

Answer 3

因为您正在使用jQuery，所以我建议您也使用jQuery进行src定义。话虽如此，使用jQuery的.attr()函数，你可以这样做：

$('#pricetile2').click(function(){

    if ( $("#pricetile2").attr('src') == "../Images/french.png" ) 
    {
        $("#pricetile2").attr('src','../Images/french2.png');
    }
    else 
    {
        $("#pricetile2").attr('src','../Images/french.png');
    }   
});

if语句不起作用的原因是因为document.getElementById("pricetile2").src将返回绝对路径，而不是相对路径（例如，将返回http://example.com/Images/french.png）。

Javascript - if语句不更改图像src

3 个答案: