使用 jquery 和 javascript 动态添加引导轮播

Question

I have to create a website only using html, js and boostrap but I have too many carousels in the website so I tried to create them dynamically onload using the code below. The below given is the girls_ethnic data.In the same way I have boys_shirts,boys_pants,boys_dungrees data.The carousels are displayed but there is some problem with the previous and next buttons.As appendCarouselElements function is invoked 4 times, there should be 4 previous and next buttons but there are only 2 previous and next buttons. One pair of them does not even work . When I click on the pair of the buttons that work, all the carousels are sliding to next item(which should not happen).PLease help me.

var girls_ethnic=[
    {
        name:"pinky frock",
        img_name:"ethnic1",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"blue frock",
        img_name:"ethnic2",
        price:"599",
        original_price:"",
        discount:""
    },
    {
        name:"cutie pink frock",
        img_name:"ethnic3",
        price:"1609",
        original_price:"2299",
        discount:"30% OFF"
    },
    {
        name:"rainbow frock",
        img_name:"ethnic4",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"white and black bow frock",
        img_name:"ethnic5",
        price:"499",
        original_price:"599",
        discount:"20% OFF"
    },
    {
        name:"butterfly frock",
        img_name:"ethnic6",
        price:"799",
        original_price:"",
        discount:""
    },
    {
        name:"red and bow elegant frock",
        img_name:"ethnic7",
        price:"849",
        original_price:"",
        discount:""
    },
    {
        name:"rose frock",
        img_name:"ethnic8",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"shinny red frock",
        img_name:"ethnic9",
        price:"799",
        original_price:"",
        discount:""
    },
    {
        name:"black frock",
        img_name:"ethnic10",
        price:"700",
        original_price:"",
        discount:""
    }
]

function fillData(){
    appendCarouselElements(girls_ethnic,"girls_ethnic");
    appendCarouselElements(boys_dungrees,"boys_dungrees");
    appendCarouselElements(boys_shirts,"boys_shirts");
    appendCarouselElements(boys_pants,"boys_pants");
}
function appendCarouselElements(dress_array,category){
    var k=0;
    var category_id="#"+category;
    if(k==0){
        var $carousel_basic=$('<div id='+category+' class="carousel slide" data-ride="carousel" interval="false">'+
        '<div class="carousel-inner">'+
        '</div>'+
        '<a class="carousel-control-prev" href='+category_id+' role="button" data-slide="prev">'+
        '<span class="carousel-control-prev-icon" aria-hidden="true"></span>'+
        '<span class="sr-only">Previous</span>'+
        '</a>'+
        '<a class="carousel-control-next" href='+category_id+' role="button" data-slide="next">'+
        '<span class="carousel-control-next-icon" aria-hidden="true"></span>'+
        '<span class="sr-only">Next</span>'+
        '</a>'+
       '</div>');
    $('#carousels').append($carousel_basic);
    }
for(var slides=0;slides<2;slides++){
    if(slides==0){
        $(".carousel-inner").append('<div class="carousel-item active"><table></table></div>');
    }
    else{
        $(".carousel-inner").append("<div class='carousel-item '><table></table></div>");      
    }
    var main=document.getElementsByTagName("table")[slides];
    var row= main.insertRow(-1);
    for(var i=k+1;i<=k+5;i++){
        console.log(dress_array);
        var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
        var item=row.insertCell(-1);
        item.innerHTML='<img class="dress-image" src='+x+' alt="First slide">'+'<div class="info"><p class="text-center text-capitalize font-weight-bold name">'+
        dress_array[i-1].name+'</p>'+
        '<p class="price">Rs '+dress_array[i-1].price +'<span class="float-right font-weight-bold discount">'+dress_array[i-1].discount+'</span></p></div>'
    }
    k=(slides+1)*5;
}
}

Answer 1

function appendCarouselElements(dress_array,category,title){
    var k=0;
    var category_id="#"+category;
    if(k==0){
        var carousel_basic=
        `<h3>${title}</h3>
        <div id=${category} class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner" id="${category}_carousel_inner">
            </div>
            <a class="carousel-control-prev" href=${category_id} role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href=${category_id} role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>`
    $('#carousels').append(carousel_basic);
    }
    for(var slides=0;slides<max_slides;slides++){
    if(slides==0){
        $("#"+category+"_carousel_inner").append(`<div class="carousel-item active" id="${category}_carousel_item_${slides}"></div>`);
    }
    else{
        $("#"+category+"_carousel_inner").append(`<div class="carousel-item" id="${category}_carousel_item_${slides}"></div>`);      
    }
    var slide_id=category+"_carousel_item_"+slides;
    $("#"+slide_id).append(`<div class="row" id="${category}_row_${slides}"></div>`);
    for(var i=k+1;i<=k+max_items;i++){
        var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
        var rows=category+"_row_"+slides;
        $("#"+rows).append(`
        <div class="col item">
        <div class="dress-image">
        <img  src="${x}" alt="First slide">
        </div>
        <div class="info">
            <p class="text-center text-capitalize font-weight-bold name">${dress_array[i-1].name}</p>
            <div class="row">
                <div class="col">
                    <span class="price">Rs&nbsp;${dress_array[i-1].price}</span>
                    ${(max_items===6 && dress_array[i-1].original_price) ? '<span class="original_price">' + dress_array[i-1].original_price + '</span>' : ''}
                </div>
                <div class="col">
                ${(dress_array[i-1].discount) ? '<span class="discount">' + dress_array[i-1].discount + '</span>' : ''}
                </div>
            </div>
        </div>
        </div>`)
    }
    k=((slides+1)*(max_items));
    }
}