2

我仍在学习 jQuery，所以我不知道这里发生了什么，但我正在使用我在 css-tricks 上找到的过滤脚本并尝试在点击时将内容加载到 div 中，但我正在进入undefinedurl。

我在不受过滤脚本影响的页面的一部分上执行了此操作，并且它有效，所以我只需要弄清楚有什么冲突。

任何人都可以请帮助！

所以这是我的 jQuery 加载内容div：

$(document).ready(function(){
    $('#target').click(function() {
        event.preventDefault();
        $('#target').empty();
        $('#target').load('project1.html');
    });
});

这是html：

<div id="target">
    <div class="sixteen columns clearfix thumbnail photoeditor">
        <div class="two-thirds columns alpha">
            <img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" />
        </div>
        <div class="one-third columns omega">
            <span class="title">Title goes here</span>
            <span class="details">Description goes here</span>
        </div>
    </div>
</div>

这是过滤器 jquery 脚本：

(function($){
    // Shuffle function from: http://james.padolsey.com/javascript/shuffling-the-dom/

    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function() {
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
            });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);
    };
})(jQuery);

$(function(){
    $(".thumbnail")
        .css("opacity","0.7")
        .hover(
            function() { $(this).css("opacity","1"); }, 
            function() { $(this).css("opacity","0.7"); }
        )

        $("#allcat").click(function(){
            $(".thumbnail").slideDown();
            $("#catpicker a").removeClass("current");
            $(this).addClass("current");
            return false;
        });

        $(".filter").click(function(){
            var thisFilter = $(this).attr("id");
            $(".thumbnail").slideUp();
            $("."+ thisFilter).slideDown();
            $("#catpicker a").removeClass("current");
            $(this).addClass("current");
            return false;
        });

        $(".thumbnail").shuffle();
});

任何帮助都会非常棒。谢谢！

编辑：或者我试过：

$(document).ready(function(){

$('#target').click(function(){

var link = $(this).attr('rel');
event.preventDefault();
$('#target').empty();
$('#target').load(link);

});
});

使用 html：

<div id="target" class="sixteen columns clearfix thumbnail photoeditor" rel="404.html">
<div class="two-thirds columns alpha">
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div>
<div class="one-third columns omega">
<span class="title">Title goes here</span>
<span class="details">Description goes here</span>
</div>
</div>

仍然无济于事。

编辑：另一个更新

所以我有点让它工作，但它只适用于第一个 div (Project1)，当我清空外部 html 的 DIV 并放回 #main-content 的内容时，它显示得很奇怪，并且没有任何功能工作。有什么建议么？

这是新的 Jquery：

$(document).ready(function(){

$('#portfolio div').click(function(event){

var link = $(this).attr('rel');
event.preventDefault();
$('#main-content').load(link);

$("#back").live("click", function(event){
$('#main-content').empty();
$('#main-content').load('index.html #main-content *');
}); 
});
});

和 HTML：

<div id="main-content">
<ul class="tabs-content">
<li class="active" id="portfolio">


<ul id="catpicker">
<li class="active"><a href="#" id="allcat" class="current">View All</a></li>
<li><a href="#" id="photoeditor" class="filter">Photo Editor</a></li> 
<li><a href="#" id="producer" class="filter">Producer</a></li></ul>

<div class="sixteen columns thumbnail photoeditor" rel="project1.html">
<div class="two-thirds columns alpha">
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div>
<div class="one-third columns omega">
<span class="title">Project 1</span>
<span class="details">Details go here</span>
</div>
</div>

<div class="sixteen columns thumbnail photoeditor" rel="project2.html">
<div class="two-thirds columns alpha">
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div>
<div class="one-third columns omega">
<span class="title">Project 2</span>
<span class="details">Details go here</span>
</div>
</div>

<div class="sixteen columns thumbnail photoeditor" rel="project3.html">
<div class="two-thirds columns alpha">
<img src="images/d1.png" class="scale-with-grid" alt="fieldlazer" /></div>
<div class="one-third columns omega">
<span class="title">Project 3</span>
<span class="details">Details go here</span>
</div>
</div>


</li>
<li id="words">
</li>
</ul>
</div><!-- main content -->
4

1 回答 1

0

我在 prevent default 行上出现错误，那是因为您忘记传递事件。像这样将事件传递给 .click 函数。

$('#target').click(function(event)

之后它对我有用。

于 2012-05-31T00:07:23.813 回答