JYC.com: jQuery.index() 的用法

index==>翻譯成中文大概意思是索引、指標..等等
所以筆者自己就去google了一下用法為何，找到這位仁兄
"trance"的部落格

自行又實作測試了一遍，以下為實做範例

(一)、點擊選項，顯示目前選項為第幾個索引值
1).先自行建立五個選項

<ul>
            <li>選擇一、</li>
            <li>選擇二、</li>
            <li>選擇三、</li>
            <li>選擇四、</li>
            <li>選擇五、</li>
        </ul>

2).撰寫jQuery

        <script type="text/javascript">
            $(document).ready(function(){
                //當li被點及觸發時就使用彈跳視窗印出li參數目前的位置索引值是第幾個
               $('ul li').click(function(){
                   alert($('ul li').index($(this)))
               });
            });
        </script>

3).完整程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //當li被點及觸發時就使用彈跳視窗印出li參數目前的位置索引值是第幾個
               $('ul li').click(function(){
                   alert($('ul li').index($(this)))
               });
            });
        </script>
    </head>
    <body>
        <!--
        1)先自行建立五個選項
        -->
        <ul>
            <li>選擇一、</li>
            <li>選擇二、</li>
            <li>選擇三、</li>
            <li>選擇四、</li>
            <li>選擇五、</li>
        </ul>
    </body>
</html>

(二)、接著來製作當點擊選項時，顯示該對應的內容
1).HTML修改為以下

  <ul>
            <li>選擇一、</li>
            <li>選擇二、</li>
            <li>選擇三、</li>
            <li>選擇四、</li>
            <li>選擇五、</li>
        </ul>
        <div>內容顯示一</div>
        <div>內容顯示二</div>
        <div>內容顯示三</div>
        <div>內容顯示四</div>
        <div>內容顯示五</div>

2).JS片段

        <script type="text/javascript">
            $(document).ready(function(){
                //先隱藏所有div
                var content=$('div').hide();
                //當li被點及觸發時就使用彈跳視窗印出li參數目前的位置索引值是第幾個
                $('ul li').click(function(){
                    //點擊時隱藏所有div
                    content.hide();
                    //把選擇的索引值存入title
                    var title=$('ul li').index($(this));
                    //把索引值帶入對應div參數中並顯示其內容
                    $(content.get(title)).show();

                });
            });
        </script>

3).完整程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //先隱藏所有div
                var content=$('div').hide();
                //當li被點及觸發時就使用彈跳視窗印出li參數目前的位置索引值是第幾個
                $('ul li').click(function(){
                    //點擊時隱藏所有div
                    content.hide();
                    //把選擇的索引值存入title
                    var title=$('ul li').index($(this));
                    //把索引值帶入對應div參數中並顯示其內容
                    $(content.get(title)).show();

                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>選擇一、</li>
            <li>選擇二、</li>
            <li>選擇三、</li>
            <li>選擇四、</li>
            <li>選擇五、</li>
        </ul>
        <div>內容顯示一</div>
        <div>內容顯示二</div>
        <div>內容顯示三</div>
        <div>內容顯示四</div>
        <div>內容顯示五</div>
    </body>
</html>

JYC.com

2010年11月16日星期二

jQuery.index() 的用法

沒有留言:

2010年11月16日 星期二

jQuery.index() 的用法

沒有留言:

2010年11月16日星期二