each() 函数上的 jquery load() 一起工作

Question

我正在处理一个 ajax 加载驱动的网站。在这里，我试图在不同的链接上加载不同的 url，但我面临一些问题。使用了 4 个链接和 4 个页面来加载每个页面都与另一个页面链接，但是单击链接时正在加载 4 个页面。

我的html是

<div class="col-md-12">
    <a href="ajax/portfolio_single.php" data-content="ajax" class="ajax-call">this is one</a>
    <a href="ajax/portfolio_single2.php" data-content="ajax" class="ajax-call">hello</a>
    <a href="ajax/portfolio_single3.php" data-content="ajax" class="ajax-call">hello</a>
    <a href="ajax/portfolio_single4.php" data-content="ajax" class="ajax-call">hello</a>
    <div class="ajaxshow"></div>
</div>

我的 javascripts 是

(function($){

'use strict';

var ajaxcontent = $('[data-content="ajax"]'),
    pathname = window.location.pathname,
    url = window.location.href,
    ajaxUrl;

ajaxcontent.each( function(index, el) {

    $( this ).append('<span class="ajax-live"></span>');

    ajaxUrl = $(this).attr('href');

    $(this).click(function(event) {
        event.preventDefault();
        $( '.ajax-live' ).addClass('ajax-live-on');
        $( this ).after('<span class="ajax-close animated bounceInRight"></span>');
        $('.ajaxshow').append().load(ajaxUrl);
        $('.ajaxshow').addClass('animated bounceInUp');
        $('.ajaxshow').css('display', 'block');
    });

    $(document.body).on('click', '.ajax-close', function( event ){
        event.preventDefault();
        $( '.ajax-live' ).removeClass('ajax-live-on');
        $( this ).removeClass('ajax-close');
        $( '.ajaxshow' ).fadeOut(600).slideUp();
    });
});

})(jQuery);

虽然hete每个功能都不起作用，但它不起作用。有人可以帮忙吗？

这里有一个工作示例 http://orlandojoes.co.uk/website/ajaxTest.php

Answer 1

在文档就绪函数中使用您的代码，如下所示：

 $(document).ready(function () {
    var ajaxcontent = $('[data-content="ajax"]'),
        pathname = window.location.pathname,
        url = window.location.href,
        ajaxUrl;

    ajaxcontent.each( function(index, el) {

        $( this ).append('<span class="ajax-live"></span>');

    });
$(document).off('click','[data-content="ajax"]');
$(document).on('click','[data-content="ajax"]',function(event) {
  var    ajaxUrl = $(this).attr('href');
            event.preventDefault();
            $( '.ajax-live' ).addClass('ajax-live-on');
            $( this ).after('<span class="ajax-close animated bounceInRight"></span>');
            $('.ajaxshow').append().load(ajaxUrl);
            $('.ajaxshow').addClass('animated bounceInUp');
            $('.ajaxshow').css('display', 'block');
        });
     $(document.body).off('click', '.ajax-close');
        $(document.body).on('click', '.ajax-close', function( event ){
            event.preventDefault();
            $( '.ajax-live' ).removeClass('ajax-live-on');
            $( this ).removeClass('ajax-close');
            $( '.ajaxshow' ).fadeOut(600).slideUp();
        });
    });

我希望这段代码能正常工作。

Answer 2

问题是您的 ajaxUrl 变量位于与您假设的不同的闭包中，因此在单击它时，它始终是第四个链接。

这是因为你先做

var ajaxcontent = $('[data-content="ajax"]'),
    pathname = window.location.pathname,
    url = window.location.href,
    ajaxUrl;

这里，ajaxUrl 对 'each' 闭包是全局的。为了解决这个问题，从“每个”范围之外删除ajaxUrl 声明，并在范围内定义它

var ajaxcontent = $('[data-content="ajax"]'),
    pathname = window.location.pathname,
    url = window.location.href;

ajaxcontent.each( function(index, el) {

    $( this ).append('<span class="ajax-live"></span>');

    var ajaxUrl = $(this).attr('href');

    $(this).click(function(event) {
.
.
.

也改变

$('.ajaxshow').append().load(ajaxUrl);

到

$('.ajaxshow').load(ajaxUrl);

不需要append，因为load 会在ajaxshow div 中插入HTML 响应