Question

我有：

<!-- home.php -->
<div id='leftColumn'>
    <input class='showVLANBtn'>
</div>
<div id='subHeader'>
    <div id='pageLogo'>
        <h1>Home Page</h1>
    </div>
</div>
<div id='page'>
    <div id='subPage'>
        <!-- misc. content -->
    </div>
</div>

我有jQuery：

$("input.showVLANBtn").click(function(){
    $('#page')
        .delay(200).fadeOut('slow')
        .load('televlans.php #page')
        .hide().delay(300).fadeIn('slow');
    return false;
});

点击.showVLANBtn后，home.php：#page将替换为televlans.php：#page。

我想修改上面的jQuery，以便在点击#pageLogo时用televlans.php：#pageLogo替换home.php：.showVLANBtn。

我明白了。如果有人有兴趣，下面是我的工作jQuery

$("input.showVLANBtn").click(function(){
    $('#page', function(){
        $('#pageLogo')
            .delay(200).fadeOut('slow')
            .load
            ('televlans.php #pageLogo')
            .hide().delay(300).fadeIn('slow');
    })
        .delay(200).fadeOut('slow')
        .load
        ('televlans.php #pageLoaded')
        .hide().delay(300).fadeIn('slow');
    return false;
});

Answer 1

如果我理解正确的话，试试这个：

$('#page')
    .add('#another_div')        //<--- add this line
    .delay(200).fadeOut('slow')
    .load('televlans.php #page')
    .hide().delay(300).fadeIn('slow');

jQuery add() docs

或者

$('#page,#another_div')
    ...

jQuery multiple selector

Answer 2

从.load() documentation开始，对于$.get(url, data, success)，出现方法是“简写”;获取url的完整内容，但仅设置提供的选择器的html。可以在complete回调中进一步过滤内容;使用不同的选择器，返回data的不同部分来执行返回数据的其他任务。

此方法是从服务器获取数据的最简单方法。它是大致相当于$.get(url, data, success)，除了它是一个方法而不是全局函数，它有一个隐式回调功能。检测到成功响应时（即textStatus时是“成功”或“未修改”），.load()设置的HTML内容匹配元素到返回的数据。

尝试

$("input.showVLANBtn").click(function(){
    $('#page')
        .delay(200).fadeOut('slow')
        .load('televlans.php #page'
        , function(data) {
          // `#page-2` : `other div` at `televlans.php`
          // `#anotherDiv` : `another div` at `home.php`
          $(data).filter("#page-2").appendTo("#anotherDiv");
        })
        .hide().delay(300).fadeIn('slow');
    return false;
});

jsfiddle http://jsfiddle.net/guest271314/ckLv2eub/

修改jQuery加载脚本以替换两个div而不是一个

2 个答案: