按下1個按鈕，同時在2個不同的div中加載2頁

Question

$('#menuhome').click(function(){
            $('#leftcolumncontainer').load('pages/homemenu.php');

        });

上面將單獨加載好時在左側加載主菜單..現在我要添加此

 $('#menuhome').click(function(){
                $('#middlcolumncontainer').load('pages/homecontent.php');

            });

上面的代碼將在中間加載家庭內容

我想要實現的是，當我單擊按鈕主菜單時，將在左側加載內容，而家庭內容將在中心加載..但是，當我單擊按鈕將內容加載到中間和左側時，此代碼有些奇怪我嘗試過這樣的事情

$('#menuhome').click(function(){
                $('#leftcolumncontainer').load('pages/homemenu.php');
                $('#middlcolumncontainer').load('pages/homecontent.php');
            });

發生同樣的事情我的問題是如何用這段代碼實現我想要的東西

"UPDATE"

$.when($('#leftcolumncontainer').load('pages/homemenu.php', $('#middlcolumncontainer').load('pages/imagegallerycolumn.php'))).done(function(x){
            return(x);

        });

這是我現在正在處理的代碼

更新

$('a.menuhome').click(function(e) {
                 $.when($('#leftcolumncontainer').load('pages/homemenu.php')).then(function() {
            $.ajaxSetup({
                url: "pages/homecontent.php",
                success: function(result) {
                    $("#middlcolumncontainer").html(result);
                }
            });
            $.ajax();
                  });});

這是我使用的新代碼，這里唯一的問題是Middlecontainer不會加載homecontent

主頁內容頁面：

<div id="middlecontainerimagegallerycolumn" >
    <div id="imagegallerycorner">
        <div id="bigimage_container"></div>
        <div id="bigimage_description"></div>
        <div id="carousel_container">
        <div id="left_scroll"><img src='images/left.png' /></div>
        <div id="carousel_inner">
        <ul id="carousel_ul" >
        <li><a href='#'><img src='images/image1.jpg' id="1"/></a></li>
        <li><a href='#'><img src='images/image2.jpg' id="2"/></a></li>
        <li><a href='#'><img src='images/image3.png' id="3"/></a></li>
        <li><a href='#'><img src='images/image4.jpg' id="4"/></a></li>
        <li><a href='#'><img src='images/image5.jpg' id="5"/></a></li>
        <li><a href='#'><img src='images/image6.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image7.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image8.png' id="5"/></a></li>
        </ul>
        </div>
        <div id='right_scroll'><img src='images/right.png' /></div>
        </div>

    </div>
</div>

js：

$("#bigimage_container").ready(function() {
        document.getElementById("bigimage_container").style.background = 'url('+$('#carousel_ul li:first img').attr("src") +') ';
        document.getElementById("bigimage_container").style.backgroundPosition = "center center";
        document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
        document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
        document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
        });
    $(document).ready(function() {
        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));


        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:nth-child(3) img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:nth-child(3) img').attr("src");
            //alert($('#carousel_ul li:nth-child(2) img').attr("src"));
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));

                //and get the left indent to the default -150px
                $('#carousel_ul').css({
                    'left': '-150px'
                });


            });
        });

        //when user clicks the image for sliding left
        $('#left_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:first img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                /* when sliding to left we are moving the last item before the first list item */
                $('#carousel_ul li:first').before($('#carousel_ul li:last'));

                /* and again, when we make that change we are setting the left indent of our unordered list to the default -150px */
                $('#carousel_ul').css({
                    'left': '-150px'
                });
            });


        });

    });

Answer 1

您需要檢查負載的異步行為，該工作提琴將幫助您

代碼段：

$('#menuhome').click(function(){
    $.when($('#leftcolumncontainer').load('http://fiddle.jshell.net/webdevem/JfcJp/show/')).done(function(x){
    $('#middlcolumncontainer').load('http://www.yahoo.com');
});
});

請注意，由於跨站點腳本編寫，不會加載www.yahoo.com，但在控制台中您將了解到它嘗試加載此URL而不是頂部URL。

Answer 2

load()只是$.get的快捷方式，它可以自動將加載的內容插入DOM，並且只要內容准備好就可以。

要加載兩個頁面的內容並同時插入兩個頁面，我們必須遠離load()並使用$.get以便我們可以在兩個頁面都加載后手動插入內容

$('#menuhome').click(function(){
    $.when(

        $.get('pages/homemenu.php'),
        $.get('pages/homecontent.php')

    ).done(function(menuData, contentData) {

        $('#leftcolumncontainer').html(menuData.shift());
        $('#middlcolumncontainer').html(contentData.shift());

    });
});

這將執行兩個ajax調用，並且僅當兩個都成功且已完成時才將內容同時插入兩個元素中。

Answer 3

就像這樣：

$('#menuhome').click(function() {
   $('#leftcolumncontainer').load($(this).attr('pages/homemenu.php'));
   $('#middlecolumncontainer').load('pages/homecontent.php');
   return false;
});

看看這個Stackoverflow

Answer 4

嘗試一下以強制順序加載資源：

$(function(){$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php', function(){
        $('#middlcolumncontainer').load('pages/homecontent.php');
    });
})});

但是，尚不清楚為什么要觀察自己的行為。 據我所知，它應該可以正常工作。 減少測試用例將有助於消除任何環境因素。

Answer 5

假設您可以同時加載兩個內容並在它們可用時插入它們，則您的第一次嘗試應該會簡單地起作用。

$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php');
    $('#middlecolumncontainer').load('pages/homecontent.php');
});

演示

我認為中間內容可能由於拼寫錯誤而無法加載。 您編寫的#middlcolumncontainer不帶e 。

否則，可能是相同的原產地政策問題。 您是在Web服務器上還是在本地文件系統上進行測試？

編輯：

然后讓我們回到基礎。 以下內容適用於我的文件系統。

index.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div>
        <div id="left"></div>
        <div id="middle"></div>
        <input type="button" id="menuhome" value="menu home" />
    </div>
    <script>
        $(function() {
            $('#menuhome').click(function() {
                $('#left').load('pages/menu.html');
                $('#middle').load('pages/content.html');
            });
        });
    </script>
</body>
</html>

pages / menu.html

<div>menu</div>

pages / content.html

<div>content</div>