更簡短的方式爲jQuery顯示/隱藏功能

我正在學習JQuery，並理解我編碼如下，因爲它完美的作品。對我來說很簡單，但它看起來有點凌亂。是否有簡單的方法以簡寫形式實現相同的結果或組合函數？點擊圖像時會顯示並隱藏不同的DIV。更簡短的方式爲jQuery顯示/隱藏功能

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#leftcolumn').hide(); 
    $('#2d').hide(); 
    $('#development').hide(); 
    $("#HideFlash").click(function() { 
     $('#movie').toggle("slow"); 
     $('#leftcolumn').toggle('slow'); 
      return false; 

     }) 
    }); 

    $('#leftcolumn').toggle('slow'); 


    $(document).ready(function() { 
    $(".img1").click(function() { 
     $('#2d').toggle("slow"); 
      return false; 

    }) 
}); 

    $(document).ready(function() { 
    $(".img2").click(function() { 
     $('#development').toggle("slow"); 
      return false; 

    }) 
}); 
</script>

HTML

<div id="container"> 


<div id="body" align="center"> 
<a id="HideFlash" href="#">hide video</a> 
<div id="movie"> 

flash object movie here 

</div> 
</div> 


<div id="leftcolumn"> 
    <h1>Stephen Carl Willis:<br> 
    Web Developer/Designer</h1> 
    <ul> 
    <li><img src="<?php echo base_url();?>/assets/images/close.png" alt="2d" class="img1">2D</></li> 
    <li><img src="<?php echo base_url();?>/assets/images/close.png" alt="2d" class="img2">Development</></li> 
    </ul> 
    </div> 


<div id="2d"> 
Here is my 2D graphic design. This includes vector, flash, ect. 
</div> 
<div id="development"> 
Here is my development portfolio. 
</div>

來源

2013-07-15 Stephen Tafler

您可以刪除第二和第三'$（文件）。就緒（...）;'包裝器，因爲這個代碼已經在事件處理程序中運行了。如果你發佈一些HTML/CSS，也許在一個jsfiddle，人們將能夠幫助 –

感謝Dom的建議。 –

'$（'＃leftcolumn，＃2d，＃development'）。hide（）;'也緩存你的選擇器。還codereview.stackexchange.com –

人使用像jsfiddle.net工具發佈的問題或soutions例子。這裏就是你看起來當一個小提琴收拾這樣的：http://jsfiddle.net/rJ8XR/

$(document).ready(function(){ 
    $('#leftcolumn').hide(); 
    $('#2d').hide(); 
    $('#development').hide(); 
    $("#HideFlash").click(function() { 
     $('#movie').toggle("slow"); 
     $('#leftcolumn').toggle('slow'); 
     return false; 
    }) 
    $('#leftcolumn').toggle('slow'); 

    $(".img1").click(function() { 
     $('#2d').toggle("slow"); 
     return false; 

    }) 
    $(".img2").click(function() { 
     $('#development').toggle("slow"); 
     return false; 
    }); 
});

...去除多餘$(document).ready()處理，並清理了一些HTML

來源

2013-07-15 01:33:45

更簡短的方式爲jQuery顯示/隱藏功能

回答

相關問題