Question

我正在使用以下代码在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一般都非常糟糕。

如果有人可以告诉我这是如何运作的话，真的很感激。

Answer 1

现在，当您点击.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'
            });

        });
    });
    }

我试图摆弄关闭和我在bug测试js中的最小经验，但我不断收到来自这一行的错误： function addHashAndScroll（id）{

在扩展div中加载内容时将哈希/子页面附加到URL

1 个答案: