1

私はJQueryを学んでおり、完璧に機能するため、以下のコードを理解しています。私にとってはシンプルですが、やや面倒なようです。速記で同じ結果を達成したり、関数を組み合わせたりする簡単な方法はありますか。画像をクリックすると、さまざまな DIV が表示および非表示になります。

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

4

1 に答える 1

0

人々は jsfiddle.net などのツールを使用して、問題や解決策の例を投稿します。フィドルで整理すると、次のようになります。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-15T01:33:45.663 に答える