爲什麼此圖像滑塊無法在模式中工作？

當模式打開時，我顯示圖像滑塊/旋轉木馬。但是，當我單擊圖像時滑塊不會顯示。該代碼是使用JavaScript生成的，然後由php頁面呈現。爲什麼此圖像滑塊無法在模式中工作？

我從服務器端發送JSON對象。我得到它沒有任何錯誤。在那個JSON對象中，我得到了3個圖像，我想在滑塊中顯示。任何圖像可能爲空白。這裏是我做了什麼：

displayData += '<div class="well well-sm" id="'+gotData.profile_id+'" style="width:180px;height:150px;background:#ccccff;display:block;float:left; border:1px solid black;padding: 5px;margin: 5px 5px 5px 5px;"'; 
displayData += '<p><b>'+gotData.first_name+'</b></p>'; 

if(gotData.img == "" && gotData.img2 == "" && gotData.img3 == ""){ 
displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png" width="100" height="100" border=""/></p>'; 

displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png" width="200" height="200" border=""/></p>'; 
} else{ 

displayData += '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">'; 
           displayData += '<div class="carousel-inner">'; 

           if(gotData.img != "" || gotData.img != undefined){ 
            displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'" width="100" height="100" border=""/></p>'; 

    displayData += '<div class="item active">'; 
    displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'" width="100" height="100" border=""/></p>'; 
    displayData += '</div>'; 
    } else {} 

    if(gotData.img2 != "" || gotData.img2 != undefined){ 
     displayData += '<div class="item">'; 
     displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img2+'" width="100" height="100" border=""/></p>'; 
     displayData += '</div>'; 
    } else {} 

    if(gotData.img3 != "" || gotData.img3 != undefined){ 
     displayData += '<div class="item">'; 
     displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img3+'" width="100" height="100" border=""/></p>'; 
     displayData += '</div>';          
    } else {} 

    displayData += '</div>'; 
    displayData += '<a class="left carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="prev">'; 
    displayData += '<span class="glyphicon glyphicon-chevron-left"></span>'; 
    displayData += '</a>'; 
    displayData += '<a class="right carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="next">'; 
    displayData += '<span class="glyphicon glyphicon-chevron-right"></span>'; 
    displayData += '</a>'; 
    displayData += '</div>'; 
} 

$('#content').html(displayData);//replacing img with data 




$('body').on('click','div.well.well-sm',function(){ 
     var list = $(this); 
     $('#myModal .modal-title').html('Profile Information'); 
     $('#myModal .modal-body').html(list.html()); 
     $('#myModal .modal-body p').removeClass('hidden'); 
     $('#myModal .modal-body p.ethumbnail').remove(); 
     $('#myModal').modal('show'); 
    });

來源

2016-02-26 Nevermore

我相信你需要調用$('.carousel').carousel()您顯示模式這樣

$('body').on('click','div.well.well-sm',function(){ 
    var list = $(this); 
    $('#myModal .modal-title').html('Profile Information'); 
    $('#myModal .modal-body').html(list.html()); 
    $('#myModal .modal-body p').removeClass('hidden'); 
    $('#myModal .modal-body p.ethumbnail').remove(); 
    $('#myModal').modal('show'); 
    $('.carousel').carousel() 
});

來源

2016-02-26 12:36:50

它不救命。點擊模式後，應該出現轉盤。點擊後需要顯示的元素被隱藏，點擊發生時顯示。 – Nevermore

你使用什麼插件模態？您需要聆聽演出/開放活動，然後初始化輪播。但是你的細節含糊不清：'點擊後需要顯示的元素被隱藏，點擊發生時顯示'。然後，@NarendraCM答案是正確的。它初始化旋轉木馬後點擊 –

是的，它的工作原理。當我從傳送帶類中刪除隱藏的屬性。我也希望滑塊能夠渲染與該項目相關的新圖像。它不顯示這些圖像。 – Nevermore

爲什麼此圖像滑塊無法在模式中工作？

回答

相關問題