javascript - jQuery 从我的 web 文件夹中的文本文件中读取并附加到 div

Question

我正在尝试从服务器上的文本文件中读取值（“img1.jpg”等）并附加到 div 以创建幻灯片放映。

唯一的问题是我需要第一个“幻灯片”来应用.active类。

这是我的文本文件的读取方式：

这是我要附加到的 div，如下所示：

 <div class="carousel-inner">
   <!-- slide -->
     <div class="active item slide3 animated fadeInUpBig">
        <img src="img1.jpg" />
     </div>
   <!-- slide -->
     <div class="item slide3 animated fadeInUpBig">
        <img src="img2.jpg" />
     </div>                           
 </div>

这是我尝试过的：

$(function () {
var file = "gallery.txt"; // gallery.txt PATH

$('<div />'.load(file, function(data){ // dummy DIV to hold data 
    var line      = data.split('\n');
    var NofImages = line.length -1;        
    for( i=0; i < NofImages; i++ ){
        image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
        $(".carousel-inner").append("<div class='active item slide3 animated fadeInUpBig'><img src='+ image +' /></div>");
    }   
}

});

Answer 1

$(function () {
    var file = "gallery.txt"; // gallery.txt PATH

    $('<div />').load(file, function(data){ // dummy DIV to hold data 
        var line      = data.split('\n'),
            NofImages = line.length -1,
            imageURL  = '';
        for( i=0; i < NofImages; i++ ){
            imageURL = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
            $(".carousel-inner").append("<div class='item slide3 animated fadeInUpBig'><img src='"+ imageURL +"' /></div>");
        } 
        // NOW ADD THE .active TO FIRST ONE
        $('.carousel-inner').find('.item').eq(0).addClass('active');
    });
});

$.ajax() 与 $.get() 和 $.load() 之间的区别

Answer 2

因此，如果您为零，请添加一个课程

var activeClass = i==0 ? "active " : "";
$(".carousel-inner").append("<div class='" + activeClass + "item...

Answer 3

试试这个：

$.get("gallery.txt").done(function(response) {
    var lines = response.split("\n");
    for (var i = 0; i < lines.length; i++) {
        var fragments = lines[i].split("|");
        var html = "<div class='item animated fadeInUpBig slide3'><img src='" + fragments[2] + "' /></div>";
        $(".carousel-inner").append(html);
    }

    $(".carousel-inner .item").eq(0).addClass("active");
});