Jquery/Javascript 使用 IF/ELSE 语句更改 img SRC
Jquery/Javascript changing img SRC with IF/ELSE statement
我是 javascript 的新手,我无法在我正在试验的一种基本配置器中使用 IF/ELSE 语句,我确信我在做一些愚蠢的事情.
我有一个主图像发生变化以显示选择的结果,问题是 IF 语句似乎无法正常工作,就像它没有通过条件一样:基本上在选择颜色时(black/silver) 没有问题,但是当点击插入时它应该改变执行 if/else 测试的 scr 以相应地改变 scr 属性。
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
这里有一个fiddle帮你帮我:
https://jsfiddle.net/1qdwaa8o/
和一个片段:
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
body{
background-color:black;
padding:0;
margin:0;
border:0;
text-align:center;
}
.main{
width:432px;
height:422px;
position:absolute;
display:inline-block;
margin-left:-216px;
margin-top:10%;
}
#img_wrapper{
width:350px;
margin-left:41px;
}
#selector_wrapper{
width:auto;
}
.selector_button{
width:50px;
height:50px;
border-radius:25px;
border:1px solid #1C1C1C;
margin: 0 10px;
cursor:pointer;
}
.clear{
clear:both;
}
#case_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
#case_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_wood{
background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
float:left;
}
#insert_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div id= "img_wrapper">
<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
</div>
<div id= "selector_wrapper">
<div id= "case">
<div class= "selector_button" id= "case_black"></div>
<div class= "selector_button" id= "case_silver"></div>
</div>
<div class= "clear"></div>
<div id= "inserts">
<div class= "selector_button" id= "insert_black"></div>
<div class= "selector_button" id= "insert_silver"></div>
<div class= "selector_button" id= "insert_wood"></div>
</div>
</div>
</div>
</body>
img
是一个 jQuery 对象,因此 img.src
将是 undefined
。
您需要测试 img[0].src
或 img.prop('src')
。
Get/set 图像的 src 使用 img.attr("src")
而不是 img.src
或者您可以使用:img.get(0).src
。 img.get(0)
类似于 document.querySelector('someSelectorToSelectYourImageAbove').src;
我是 javascript 的新手,我无法在我正在试验的一种基本配置器中使用 IF/ELSE 语句,我确信我在做一些愚蠢的事情. 我有一个主图像发生变化以显示选择的结果,问题是 IF 语句似乎无法正常工作,就像它没有通过条件一样:基本上在选择颜色时(black/silver) 没有问题,但是当点击插入时它应该改变执行 if/else 测试的 scr 以相应地改变 scr 属性。
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
这里有一个fiddle帮你帮我:
https://jsfiddle.net/1qdwaa8o/
和一个片段:
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
body{
background-color:black;
padding:0;
margin:0;
border:0;
text-align:center;
}
.main{
width:432px;
height:422px;
position:absolute;
display:inline-block;
margin-left:-216px;
margin-top:10%;
}
#img_wrapper{
width:350px;
margin-left:41px;
}
#selector_wrapper{
width:auto;
}
.selector_button{
width:50px;
height:50px;
border-radius:25px;
border:1px solid #1C1C1C;
margin: 0 10px;
cursor:pointer;
}
.clear{
clear:both;
}
#case_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
#case_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_wood{
background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
float:left;
}
#insert_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div id= "img_wrapper">
<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
</div>
<div id= "selector_wrapper">
<div id= "case">
<div class= "selector_button" id= "case_black"></div>
<div class= "selector_button" id= "case_silver"></div>
</div>
<div class= "clear"></div>
<div id= "inserts">
<div class= "selector_button" id= "insert_black"></div>
<div class= "selector_button" id= "insert_silver"></div>
<div class= "selector_button" id= "insert_wood"></div>
</div>
</div>
</div>
</body>
img
是一个 jQuery 对象,因此 img.src
将是 undefined
。
您需要测试 img[0].src
或 img.prop('src')
。
Get/set 图像的 src 使用 img.attr("src")
而不是 img.src
或者您可以使用:img.get(0).src
。 img.get(0)
类似于 document.querySelector('someSelectorToSelectYourImageAbove').src;