扩展和隐藏jQuery

时间:2014-03-07 17:28:36

标签: jquery expand

任何人都可以指出以下是“坏代码”的位置吗?不幸的是,我无法完全链接/显示它所在的页面,但是从9月开始,这就是在单击适当的按钮时显示隐藏内容的目的。现在由于某种原因,有人向我报告说代码是“坏代码”,功能被破坏,需要重新编写。这个代码背后的想法是让标题带有一个扩展按钮(expandBtn.png),当点击该按钮时,隐藏的内容会被显示,然后expandBtn.png将变成hideBtn.png,它将再次隐藏内容点击。

我不知道脚本在哪里被“破坏”,或者它正在做什么/不做它应该或不应该,但显然另一位开发人员能够浏览代码而无需查看页面并说出来这是错误的,所以我希望这里有人能够熟练地查看代码,或许看到什么是不对的。提前谢谢。

     // FOR EACH SECTION THAT HAS THE HIDDEN CONTENT BE SURE TO CHANGE THE ID OF THE IMG IN THE MARKUP TO HAVE THE SINGULAR FORM OF THE #SWITCH ID 

    $(document).ready(function()     
    { $('div.hiddenComplexity').hide();});
            $('div.expandingBtnComplexity').click(function()
          {$('div.hiddenComplexity').slideToggle('fast');
            }); 

    $(document).ready(function(){
    var openIconPath = 'openIconPath';
    var closedIconPath = 'closedIconPath';

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

    if($(this).attr('src') == openIconPath){
     $(this).attr('src', closedIconPath);
    }else{ 
     $(this).attr('src',openIconPath);
    }
   });
   });
   //
   //

   $(document).ready(function(){

   var openIconPath = '/resource/uploads_scope/img/expandBtn.png';
   var closedIconPath = '/resource/uploads_scope/img/hideBtn.png';

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

   if($(this).attr('src') == openIconPath){
     $(this).attr('src', closedIconPath);
   }else{ 
     $(this).attr('src',openIconPath);
   }
   });
   });

1 个答案:

答案 0 :(得分:2)

很快,你可以:

  1. 消除冗余就绪功能
  2. 折叠选择器,以便不会多次计算检索
  3. 结果:

    $(function () {
        // Set the selectors
        var $hiddenComplexity = $('div.hiddenComplexity'),
            $expandingBtnComplexity = $('div.expandingBtnComplexity'),
            $switchImage = $('#switch_image');
    
        // Setup the icon paths
        var openIconPath = '/resource/uploads_scope/img/expandBtn.png',
            closedIconPath = '/resource/uploads_scope/img/hideBtn.png';
    
        $hiddenComplexity.hide();
    
        // Bind the handlers
        $switchImage.click(function () {
            var src = $switchImage.attr('src');
            switchImage.attr('src', src == openIconPath ? closedIconPath : openIconPath);
        });
    
        $expandingBtnComplexity.click(function () {
            $hiddenComplexity.slideToggle('fast');
        });
    });
    
    无论哪种方式,也许你应该考虑更多的OOP方法。