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);

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

我使用了正确的语法。
如何使用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/

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

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

3 个答案: