0

このコードを使用して、div内の個別の.htmlドキュメントを読み込んでいます。

JS

 $('.thumbnail').click(function() {
 var idStr = ("project/"+$(this).attr('id')) + " #projectcontainer";


     $('#projectcontainer').animate({opacity:0});
     $('#projectcontainer').hide().load(idStr,function(){

                $(this).slideDown(500).animate({opacity:1}, function() {
                                    $.scrollTo('#gohere',800);
                    $('#close').fadeIn(500).css({'display': 'block', 'height': '25px'});

                });
    });
 });

HTML

<div class="thumbnail" id="atmotype.html">
<img src="image.whatever">
</div>

すべて意図したとおりに機能しますが、プロジェクトを開くときにIDを追加し、そのコンテンツに直接リンクできるようにします（すでにdivで展開されています）。私は試してみましたが、解決策を思い付くことができません。それは、私が一般的にJSにかなりひどいことだと言われています。

誰かがこれがどのように機能するかについて私に教えてくれたら本当にありがたいです。

4

1 に答える 1

0

.thumbnail要素をクリックすると、click()イベントが発生$(this).attr('id')し、ハッシュ/スクロールに使用されます。ページの読み込み時にこれを実行するには、ID をパラメーターとして受け取る別の関数に分割し、click()イベントからこの関数を呼び出すだけでなく、 のパラメーターを使用して一般的なページの読み込みを行う必要がありますlocation.hash。

$(document).ready(function(){
    if (location.hash.length>0){
        /* this assumes the page to load is the only thing in the 
           hash, for example /page.php#project.html */
        var hash = location.hash.substring(1); // get hash and remove #
        addHashAndScroll(hash);                // call function with page name
    }
    $('.thumbnail').click(function() {
        addHashAndScroll($(this).attr('id'));  // pass ID value to function
    });
}

// this function contains most of your original script
function addHashAndScroll(id){
    var idStr = "project/"+ id + "#projectcontainer";
    // rest of your code
}

更新: これは js に関するもので、説明するとすべて意味がありますが、実行するのは雌犬です。とにかく、助けてくれてありがとう。あなたの説明に基づいて、私が得るものは次のとおりです。

$(document).ready(function() {
    if (location.hash.length > 0) {
/* this assumes the page to load is the only thing in the 
           hash, for example /page.php#project.html */
        var hash = location.hash.substring(1); // get hash and remove #
        addHashAndScroll(hash); // call function with page name
    }
    $('.thumbnail').click(function() {
        addHashAndScroll($(this).attr('id')); // pass ID value to function
    });
}


// this function contains most of your original script

function addHashAndScroll(id) {
    var idStr = "project/" + id + "#projectcontainer";
    $('#projectcontainer').animate({
        opacity: 0
    });
    $('#projectcontainer').hide().load(idStr, function() {

        $(this).slideDown(500).animate({
            opacity: 1
        }, function() {
            $.scrollTo('#gohere', 800);
            $('#close').fadeIn(500).css({
                'display': 'block',
                'height': '25px'
            });

        });
    });
    }

私はクロージャーとバグテストjsでの最小限の経験をいじろうとしましたが、次の行からエラーが発生し続けます: function addHashAndScroll(id) {

于 2012-11-05T15:36:55.547 に答える