jquery - 无法获取fadeOut / fadeIn的元素

时间:2014-11-26 09:02:05

标签: javascript jquery

我已经编写了这段代码,以便替换有关他们点击的img的文字。 我无法理解为什么我的代码没有执行,我一遍又一遍地看着它。 我希望有人能找到我的错误:(

这是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');
                }
            });
        });

这是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>

请帮忙!!!! 感谢

4 个答案:

答案 0 :(得分:1)

问题在于您的状况检查

而不是使用

currentId===3 //检查currentId是否为数字3

使用

currentId=='3' //将===更改为==,检查currentId是字符串类型3

还有一件事,点击a后您的网页会重定向,因此如果您想阻止这种情况,请使用preventDeault或将#放入href。< / p>

答案 1 :(得分:0)

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

$(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');
                }
            });
        });

工作链接 http://jsbin.com/heseforaxe/1/edit?html,js,output

答案 2 :(得分:0)

  

var currentId = $(this).attr('id');

属性的所有值都是字符串,而不是数字。 所以,你可以这样改变。

  

currentId === “3”;

  

currentId == 3;

答案 3 :(得分:0)

  
      
  1. currentId === 3这应该更改为currentId == 3因为返回的id是字符串
  2.   
  3. 因为在点击链接时有回帖需要在标签上添加ref =“#”
  4.   
  5. div id ='text-1'和主div
  6. 上缺少结束标记   
  7. 你可以从这个网址“http://jsfiddle.net/t3L1fkuh/6/”找到这个的工作副本(我删除了图片,因为其中2个没有加载)。
  8.   
.textbox{
     display: none;    
   }
  

添加上面的类,以便在页面加载时添加淡入效果