Question

我需要一个脚本来滑动我的xml列出的汽车网页。我必须把它们显示为四边形。（1张幻灯片上有4辆车）。所以我写了一个代码来获取数据并将它们分成4个。

但它只获得前4项循环。我的大脑已经停止找不到问题了。

$(document).ready(function() {
function itemContentBuilder(array, index) {
    var items = '';
    items += '<div class="col-md-3">';
    items += '<div class="carholder">';
    items += '<div class="firstholder">';
    items += '<div class="showthecar"><img alt="" src="' + array[index].carimage + '"></div>';
    items += '<div class="innergrey"></div></div>';
    items += '<div class="carheader">';
    items += '<span class="thebox"></span>';
    items += '<h3>' + array[index].brand + ' <span>' + array[index].model + '</span></h3>';
    items += '<div class="carprice">' + array[index].price + '</div>'
    items += '<div class="car-description">' + array[index].desc + '</div>';
    items += '<div class="car-specs">'
    items += '<ul>';
    items += '<li><img alt="" src="assets/img/icon-key.png"><span>' + array[index].spec1 + '</span></li>';
    items += '<li><img alt="" src="assets/img/icon-engine.png"><span>' + array[index].spec2 + '</span></li>';
    items += '<li><img alt="" src="assets/img/icon-gear.png"><span>' + array[index].spec3 + '</span></li>';
    items += '</ul>';
    items += '</div>';
    items += '</div>';
    items += '</div>';
    items += '</div>';
    return items;
}
var array = [];
$.ajax({
    type: "GET",
    url: "assets/js/cars.xml",
    cache: false,
    dataType: "xml",
    success: function(xml) {
        $(xml).find('car').each(function() {
            array.push({
                carimage: $(this).find('carimage').text(),
                brand: $(this).find('brand').text(),
                model: $(this).find('model').text(),
                price: $(this).find('price').text(),
                desc: $(this).find('desc').text(),
                spec1: $(this).find('spec1').text(),
                spec2: $(this).find('spec2').text(),
                spec3: $(this).find('spec3').text(),
            });
        });
        var loopCount = array.length;
        var remain = ((array.length / 4.0) - Math.floor(array.length / 4));
        if (remain < 1) {
            if (remain === 0.25) {
                loopCount = loopCount + 3;
            }
            if (remain === 0.50) {
                loopCount = loopCount + 2;
            }
            if (remain === 0.75) {
                loopCount = loopCount + 1;
            }
        }

        var content = '';
        var index = 0;
        var currentIndex = 0;
        var increaseStatus = true;
        for (var i = 0; i < loopCount; i++) {
            if (currentIndex === i) {
                currentIndex = 0;
                increaseStatus = false;
            } else if (increaseStatus) {
                currentIndex = i;
            }
            if (index === 0) {
                content += '<div class="item">';
            }
            content += itemContentBuilder(array, index);
            index++;
            currentIndex++;
            if (index === 4) {
                content += '</div>';
                index = 0;
            }
        }

        $('.carousel-inner').prepend(content);
        $('.carousel-inner').find('.item').first().addClass('active');
    },
    error: function() {
        console.log('XML Data Error!');
    }

});

}）;

这是cars.xml的示例数据

<first>
<car>
    <carimage>assets/img/carslider/citroen.png</carimage>
    <brand>CITROEN</brand>
    <model>C-ELYSSE</model>
    <price>255 EURO + KDV</price>
    <desc>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt aliqua.</desc>
    <spec1>1.6 HDI ATTRACTION M/T - 2016</spec1>
    <spec2>92 HP</spec2>
    <spec3>MANUEL</spec3>
</car>

Answer 1

content += itemContentBuilder(array, index);

index是您的变量，当它达到4时，您会定期重置为0.

您希望在此处使用for循环计数器变量i，而不是index。

Answer 2

我们解决了下面的问题..我认为gonne是XML-HTML数据滑动的好例子

    // *** XML CAR LIST NORMAL *** //
$(document).ready(function() {
    function itemContentBuilder(array, index) {
        var items = '';
        items += '<div class="col-md-3">';
        items += '<div class="carholder">';
        items += '<div class="firstholder">';
        items += '<div class="showthecar"><img alt="" src="' + array[index].carimage + '"></div>';
        items += '<div class="innergrey"></div></div>';
        items += '<div class="carheader">';
        items += '<span class="thebox"></span>';
        items += '<h3>' + array[index].brand + ' <span>' + array[index].model + '</span></h3>';
        items += '<div class="carprice">' + array[index].price + '</div>'
        items += '<div class="car-description">' + array[index].desc + '</div>';
        items += '<div class="car-specs">'
        items += '<ul>';
        items += '<li><img alt="" src="assets/img/icon-key.png"><span>' + array[index].spec1 + '</span></li>';
        items += '<li><img alt="" src="assets/img/icon-engine.png"><span>' + array[index].spec2 + '</span></li>';
        items += '<li><img alt="" src="assets/img/icon-gear.png"><span>' + array[index].spec3 + '</span></li>';
        items += '</ul>';
        items += '</div>';
        items += '</div>';
        items += '</div>';
        items += '</div>';
        return items;
    }
    var array = [];
    $.ajax({
        type: "GET",
        url: "assets/js/cars.xml",
        cache: false,
        dataType: "xml",
        success: function(xml) {
            $(xml).find('car').each(function() {
                array.push({
                    carimage: $(this).find('carimage').text(),
                    brand: $(this).find('brand').text(),
                    model: $(this).find('model').text(),
                    price: $(this).find('price').text(),
                    desc: $(this).find('desc').text(),
                    spec1: $(this).find('spec1').text(),
                    spec2: $(this).find('spec2').text(),
                    spec3: $(this).find('spec3').text(),
                });
            });

            var content = '';
            var index = 0;

            var currentIndex = 0;

            var increaseStatus = true;

            var remain = ((array.length / 4.0) - Math.floor(array.length / 4));
            if (remain < 1) {
                if (remain === 0.25) {
                    array.push(array[0]);
                    array.push(array[1]);
                    array.push(array[2]);
                }
                if (remain === 0.50) {
                    array.push(array[0]);
                    array.push(array[1]);
                }
                if (remain === 0.75) {
                    array.push(array[0]);
                }
            }

            for (var i = 0; i < array.length; i++) {

                if (currentIndex === i) {
                    currentIndex = 0;
                    increaseStatus = false;

                } else if (increaseStatus) {
                    currentIndex = i;
                }
                if (index === 0) {
                    content += '<div class="item">';
                }
                content += itemContentBuilder(array, i);
                index++;
                currentIndex++;
                if (index === 4) {
                    content += '</div>';
                    index = 0;
                }
            }

            $('.carousel-inner').prepend(content);
            $('.carousel-inner').find('.item').first().addClass('active');
        },
        error: function() {
            console.log('XML Data Hatası!');
        }
    });
});

JS获取并循环只有四个项目

2 个答案: