Question

以下脚本会将其他页面中的内容从主页上的指定DIV中提取出来。但是，我希望它能够将内容从DIV中的链接加载到最近的.links，其中有多个，每个都单独运行。这意味着，页面顶部的.links中的第1到3个链接加载到距离它最近的第一个DIV，而.links 4-6执行相同但位于其中的不同区域同一页。

更新我试图让每个.class li中的第一个链接最初加载到.class + div。我也试图让每个元素单独工作，以便链接不会影响所有div。

$(document).ready(function() { $('.links + div').load($('.links li a:first').attr('href')); $(document).on('click','.links li a:not(.noajax)',function(e) { e.preventDefault(); var $link = $(this), url = $link.attr('href'); $link.closest('.links').next('div').fadeOut('fast').load('+ page +').fadeIn('slow'); }); });

HTML

<ul class="links"> <li><a href="one.php">One</a></li> <li><a href="two.php">Two</a></li> </ul> <div></div> <ul class="links"> <li><a href="Three.php">Three</a></li> <li><a href="Four.php">Four</a></li> </ul> <div></div>

Answer 1

如果您使用的HTML结构已修复，则具有：

<ul class="links">
 ...
</ul>
<div></div>


<ul class="links">
 ...
</ul>
<div></div>

然后你可以使用：

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function()  {
        /* code */
        $(this).closest('.links').next('div').fadeOut('fast').load('' + page + '.php').fadeIn('slow');
        /* code */
    });
});

如果HTML结构没有修复，那么这样的东西就可以了：

<ul class="links" data-load-target="div1">
 ...
</ul>
<!-- HTML -->
<div id="div1"></div>


<ul class="links" data-load-target="div2">
 ...
</ul>
<!-- HTML -->
<div id="div2"></div>

的jQuery

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function()  {
        /* code */
        var loadTarget = $(this).closest('.links').data('load-target');
        if (loadTarget)
            $('#' + loadTarget).fadeOut('fast').load('' + page + '.php').fadeIn('slow');
        /* code */
    });
});

更新

HTML

<ul class="links">
  <li><a href="login.php">Login</a>
</ul>
<div></div>

的jQuery

$(document).ready(function() {
    $('.links + div').load('login.php')
    $(document).on('click','.links li a:not(.noajax)',function(e)  {
        e.preventDefault();

        var $link = $(this),
            url = $link.attr('href');
        $link.closest('.links').next('div').fadeOut('fast').load(url).fadeIn('slow');
        /* code */
    });
});

.load（）单独加载多个内容

1 个答案: