[英]jquery - can't get the elements to fadeOut / fadeIn
I've wrote this code in order to replace the text regarding the img they are clicking. 我写了这段代码是为了替换有关他们单击的img的文本。 I can't understand why my code isn't executing, I looked it over and over again.
我不明白为什么我的代码没有执行,我一遍又一遍地看。 I hope someone can find my mistake :(
我希望有人能发现我的错误:(
This is the jQuery code: 这是jQuery代码:
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId===3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId===2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId===1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
and this is the HTML: 这是HTML:
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
Please help!!!! 请帮忙!!!! Thanks
谢谢
Problem is in your condition checking 问题在于您的状况检查
instead of using such that 而不是这样使用
currentId===3
// checks that currentId is numeric 3 currentId===3
//检查currentId是否为数字3
Use 采用
currentId=='3'
//changed === to ==, check that currentId is string type 3 currentId=='3'
//将===更改为==,检查currentId为字符串类型3
And one more thing, after clicking a
your page is redirecting, so if you want to prevent this, use preventDeault
or put #
in your href
. 还有一两件事,之后点击
a
你的页面重定向,所以如果你想避免这种情况,使用preventDeault
或者把#
在你的href
。
HTML HTML
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
JS JS
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId==3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId==2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId==1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
WORKING LINK http://jsbin.com/heseforaxe/1/edit?html,js,output 工作链接http://jsbin.com/heseforaxe/1/edit?html,js,输出
var currentId = $(this).attr('id');
var currentId = $(this).attr('id');
All the value of attributes is string ,not number. 属性的所有值都是字符串,而不是数字。 so,you can change like this.
因此,您可以像这样进行更改。
currentId==="3";
currentId === “3”;
or 要么
currentId==3;
currentId == 3;
- currentId===3 this should be changed to currentId==3 because the returned id is string
currentId === 3,这应该更改为currentId == 3,因为返回的id是字符串
- because there is a post back when clicking the link you need to add ref="#" to the a tag
因为点击链接后会有回帖,您需要将ref =“#”添加到a标签
- there are missing closing tags on div id='text-1' and the main div
div id ='text-1'和主div上缺少结束标记
- you can find a working copy of this from this url " http://jsfiddle.net/t3L1fkuh/6/ " (i have removed the images because 2 of them does not load).
您可以从此网址“ http://jsfiddle.net/t3L1fkuh/6/ ”中找到该文件的工作副本(由于其中2个未加载,因此我已删除了它们)。
.textbox{
display: none;
}
the above class is added so that it adds the fade in effect on page load
添加上述类,以便增加页面加载时的淡入效果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.