如何使用ajax在文件中加載特定的div/class？

我有一個名爲main.html的文件，其中包含幾個div，每個div有兩個類： 1st是它們的特定類第二個是一個名爲menu-item的類，用於確定單擊時是否觸發事件。如何使用ajax在文件中加載特定的div/class？

該文件包含此：

<div id="load-here"> 

</div> 

<div class="item-1 menu-item"> 
    click this 
</div>

我也有我想要被加載到#load-here DIV的main.html中文件gallery.html文件，並假設它包含此：

<div class="menu-item> 
    <!-- some image here --> 
    <img href="img/1.jpg /> 
</div>

劇本我是這樣的：

$(document).ready(function() { 
    $("div").click(function() { 

     if ($(this).hasClass("menu-item")) { 
      $("#load-here").load("gallery.html" + this.class); 
     } 

    }); 
});

的問題：這是不工作。我嘗試了各種變化。不知怎的，它沒有裝入#load-here DIV

來源

2016-02-27 castlenibill

您是使用Web服務器運行此操作還是直接在瀏覽器中使用'file：//打開該HTML文件'？ – kabirbaidhya

http://stackoverflow.com/questions/18618865/load-part-page-with-jquery-ajax – Aziz

沒有'this.class' ....是未定義的。即使有，它會包括''菜單項「'和前面的空格 – charlietfl

看看這個：http://api.jquery.com/load/

$("#b").load("article.html #target");

來源

2016-02-27 14:47:47 SebCar

似乎有幾個問題：

通過這個：$("div").click(function() ...你對所有div註冊點擊可用。這可能會導致奇怪的行爲。更好地使用：$("div.menu-item").click(...
確保您瞭解回調函數中的上下文和事件目標。有時候this會欺騙你，因爲通話的上下文可能會有所不同。如果將事件作爲顯式參數處理並檢查事件目標，情況會更加清晰。
我想你想給你的gallery.html一個參數，但作爲@charlietfl提到，沒有.class。但是，在DOM中有一個.className。最好嘗試使用jQuery $().attr('class')。此外，該參數需要一個分隔符：gallery.html?parameter

概括起來，在這裏我的建議：

$("div.menu-item").click(function(event) { 

    var jqTarget = $(event.target).closest('.menu-item'); 

    if (jqTarget.hasClass("menu-item")) { 
    $("#load-here").load("gallery.html" + "?" + this.class); 
    } 

});

closest()將嘗試找到最匹配的元素，如果點擊的目標並不在div本身，而是一個孩子img或其他。因此，應該使用建議中的條件來查找有關哪個菜單項被點擊的更具體的內容：if (jqTarget.hasClass("that-specific-item") ...

來源

2016-02-27 14:53:35

如何使用ajax在文件中加載特定的div/class？

回答

相關問題