jquery lädt einen bestimmten #Div-Inhalt aus mehreren HTML-Dateien

Question

Ich versuche, einen Content-Slider für meine Website zu erstellen. Ich habe mehrere HTML-Dateien und die Struktur dieser Dateien ist wie folgt:

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

Ich habe versucht, das folgende Skript verwenden zu Inhalt (aber keinen Erfolg):

<?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(); 
} 

Aber dann ich kam über eine jQuery-Funktion .... (wieder keinen Erfolg)

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

Nun meine Fragen wissen, sind .....

1. Ich verwende die richtige Syntax.

2. Wie bekomme ich den Inhalt aus mehreren Dateien mit jQuery.

Bitte beachten Sie: Mein Wissen über Programmierung ist fast '0'. Ich habe gerade angefangen, es zu lernen.

Answer 1

Jquery hat keine intuitiven Kenntnisse über Dateien auf dem Remote-Dateisystem. Sie könnten aber etwas tun, wie folgt aus:

$(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 
     } 
}); 

Dieses etwas tun wird, ähnlich zu dem, was Sie mit PHP zu tun versuchten. Ich kenne PHP nicht sehr gut, aber das könnte ein besserer Weg sein (abhängig von seinen DOM-Verarbeitungsfähigkeiten), da das obige eine Anfrage für jede Datei erzeugt.

Answer 2

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

Dies wird funktionieren, aber nicht sehr schnell. Sie führen drei separate Anfragen auf derselben Seite aus. Sie können sie alle in eine kombinieren ziemlich leicht $.get und seine Callback-Argument:

$.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')); 
}); 

Bitte beachte, dass ich slide-title-slide-image in der letzten Zeile korrigiert haben, da ich Hink das ist, was Sie brauchen.

Answer 3

Ihr jquery-Code scheint korrekt zu sein. Was ist die Ausgabe, die Sie bekommen?

Hier ist ein Zeiger auf das, was Sie versuchen zu erreichen ..

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

Lassen Sie mich wissen, ob das hilft ....