jquery 从多个 html 文件中加载特定的#Div 内容

Question

我正在尝试为我的网站制作内容滑块。我有多个 HTML 文件，这些文件的结构是这样的：

<div id="title"><h2>Title of the Slide</h2></div>
<div id="image"><a href="http://mylink.com"><img src="image.jpg" width="600" height="300" alt="image"</a></div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>

我一直在尝试使用以下脚本获取内容（但没有成功）：

<?php
function render($position="") {
    ob_start();
    foreach(glob("/slides/*.html") as $fileName) {
    $fname = basename( $fileName );
    $curArr = file($fname);
    $slides[$fname ]['title'] = $curArr[0];
    $slides[$fname ]['image'] = $curArr[1];
    $slides[$fname ]['content'] = $curArr[2];

    foreach($slides as $key => $value){

        ?>
          <div id="slide-title">
            <?php echo $value['title'] ?>
          </div>

          <div id="slide-content">
              <?php echo $value['content'] ?>
          </div>

          <div id="slide-image">
              <?php echo $value['image'] ?>
          </div>

        <?php
        }}
        ?>
    <?php
    return ob_get_clean();
}

但后来我知道了一个 jQuery 函数....（再次没有成功）

    jQuery.noConflict();
      (function($){
        $(document).ready(function () {    
          $('#slide-title').load('slides/slide1.html #title');
          $('#slide-content').load('slides/slide1.html #content');
          $('#slide-image').load('slides/slide1.html #image');
      });   
    })(jQuery);

现在我的问题是.....

1. 我是否使用了正确的语法。

2. 如何使用 jQuery 从多个文件中获取内容。

请注意：我的编程知识几乎是“0”。我刚刚开始学习它。

Answer 1

$('#slide-title').load('slides/slide1.html #title');
$('#slide-content').load('slides/slide1.html #content');
$('#slide-title').load('slides/slide1.html #image');

这会起作用，但不会很快。您正在对同一页面执行三个单独的请求。您可以使用 $.get 及其回调参数将它们轻松组合成一个：

$.get('slides/slide1.html', function(html) {
    var $html = $(html);

    $('#slide-title').html($html.find('#title'));
    $('#slide-content').html($html.find('#content'));
    $('#slide-image').html($html.find('#image'));
});

请注意，我已将最后一行中的 slide-title 更正为 slide-image，因为我认为这正是您所需要的。

Answer 2

Jquery 对远程文件系统上的文件没有直观的了解。但是，您可以执行以下操作：

$(document).ready(function () {    
      for(var i = 1; i < 5; i++) {
        $('body').append('<div id="slide-content-'+i+'"></div>');
        $('#slide-title-'+i).load('slides/slide'+i+'.html #title');
        // ...and so on
      }
});

这将做一些类似于你试图用 PHP 做的事情。我不太了解 PHP，但这可能是一种更好的方法（取决于它的 DOM 处理能力），因为上面将为每个文件创建一个请求。

Answer 3

您的 jquery 代码似乎是正确的。你得到的输出是什么？

这是您要完成的任务的指针..

http://www.electrictoolbox.com/load-content-jquery-ajax-select-element/

让我知道这是否有帮助....