Question

我正在使用来自ben alman的jquery + hashchange插件。以下是获取哈希名称和加载内容的标准方法

$(window).hashchange(function() {
var hash = location.hash;
var array_url = hash.split('#');
var page = $(array_url).last()[0];
$('#content').load( page + '.php', function(){
});
});

但有没有办法通过抓取点击功能上分配的其他变量或通过php进行排序来实现这一点呢？

我正在与一个多艺术家投资组合网站合作，将独特的三四字母代码分发给图像

我想通过独特的网址提供这些图片。这必须通过ajax出于多种原因。

我在添加其他ajax历史记录选项时遇到了困难，因为此页面已经在使用ajax分页（加载此内容）和许多htaccess url modrewrites。

我在想这可能是不可能的。

这是我目前的代码

$('a.photo').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    var clickedLink = $(this).attr('id');
    location.hash = clickedLink;
    image.onload = function () {
         $('#content').empty().append(image);
    };
    image.onerror = function () {
       $('#content').empty().html('That image is not available.');
    }
    $('#content').empty().html('Loading...');
    return false;
});

$(window).hashchange( function(){
    var hash = location.hash;
    var url = ( hash.replace( /^#/, '' ) || 'blank' );
    document.title = url;
})

$(window).hashchange();

和我的html / php：

$thethumb = customuniqueidfunc();

<a href="[IMG URL]" 
class="photo gotdesc nohover" rel="<?php echo $row['description'] ?>" 
id="<?php echo $thethumb; ?>">

只要将href attr中的图像加载到#content div中，并将来自id attr的散列作为哈希添加到网址和标题中页面，但我缺乏任何组合click和hashchange函数的机制，因此每个哈希实际上对应于图像。

Answer 1

之前我用过的一种方法是运行哈希轮询功能。您可以在此页面上看到它：

http://www.webskethio.com/#services

以下是该页面的javascript：

http://www.webskethio.com/ws.js

相关代码：

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}

$(document).ready(function(){

    /* code removed for readability */ 

    setInterval('pollHash()',100); // Important piece

    /* code removed for readability */


});

和

//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;






var url = $(this).attr('href'),
image = new Image();
image.src = url;
var clickedLink = $(this).attr('id');
location.hash = clickedLink;
image.onload = function () {
     $('#content').empty().append(image);
};
image.onerror = function () {
   $('#content').empty().html('That image is not available.');
}
$('#content').empty().html('Loading...');       




}

[编辑：]以下是您的网页应该有效的完整代码，前提是您可以创建一个只从数据库输出图像位置的页面。

var recentHash = "";
var image_url ="";

$(document).ready(function() {

    $('a.photo').click(function (event) {
        var clickedLink = $(this).attr('id');
        location.hash = clickedLink;

        event.preventDefault();
    });


    setInterval('pollHash()',100);

});

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}


//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;
    if(pageId != ""){
        var temp_url = 'http://whitecu.be/user/mountain/'+pageId+'.html';
        $.get(temp_url, function(data) {

            image_url = data;
            image = new Image();
            image.src = image_url;

            image.onload = function () {
                $('#content').empty().append(image);
            };
            image.onerror = function () {
                $('#content').empty().html('That image is not available.');
            }
            $('#content').empty().html('Loading...');       

        });



    }else{

        window.location = "http://whitecu.be/user/mountain";

    }

}

通过hashchange + jquery加载内容，基于文件名而不是哈希

1 个答案: