我有麻烦格式化我的html代码

Question

function displayRestaurants() {
var table = document.getElementById("restaurantsTable");

如果你一直向右滚动，你会看到一个反斜杠。我需要帮助，如果有一种方法来编码它没有这些反斜杠 ?

table.innerHTML = "";
totalRestaurants = restaurants_array.length;
for (var count = 0; count < totalRestaurants; count++) 
{
var rimg =  restaurants_array[count].restaurant_img;
var name = restaurants_array[count].name;
var cell = '<div class="col-md-10" style="float: none; margin: 0 auto;"> <h3><span>' + name + '</span>    </h3>                                                                                                                                                                                                 
<div class="flip-container" >                                                                                                                                                                                                                                                                
<div class="flipper">                                                                                                                                                                                                                                          
<div class="front">                                                                                                                                                                                                                                 
<a id="restaurants" href="#" data-toggle="modal" data-target="#movieModal" item=' + count + '>                                                                                                                                                      
<img class="img-fluid img-thumbnail" src=' + rimg + ' />                                                                                                                                          
</a>                                                                                                                                                                                                                                     
</div>                                                                                                                                                                                                                                                   
<div class="back">                                                                                                                                                                                                                                           
<div class="bg-dark mystyle text-center py-3" >                                                                                                                                                         
                                                                                                                                                                       
<button href="#" data-toggle="modal" data-target="#movieModal" item="' + count + '" type="button" class="btn btn-primary btn-sm" onClick="showMovieDetails(this)" >See More</button>                    
<button href="#" data-toggle="modal" data-target="#commentModal" item="' + count + '" type="button" class="btn btn-primary btn-sm" onClick="showMovieComments(this)" >Comments</button>                     
</div>                                                                                                                                                                                                                                 
</div>                                                                                                                                                                                                                                               
</div>                                                                                                                                                                                                                                                           
</div>                                                                                                                                                                                                                                                                          
</div>';
table.insertAdjacentHTML('beforeend', cell);

}
}

Answer 1

使用模板文字

var cell = `
<div class="col-md-10" style="float: none; margin: 0 auto;">
<h3><span>${name}</span></h3>                                                                           
<div class="flip-container">                                                                           
<div class="flipper">                                                                                 
<div class="front">
<a id="restaurants" href="#" data-toggle="modal" data-target="#movieModal" item="${count}">
<img class="img-fluid img-thumbnail" src="${rimg}" />
</a>
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3">
<button data-toggle="modal" data-target="#movieModal" item="${count}" type="button" class="btn btn-primary btn-sm" onClick="showMovieDetails(this)">See More</button>
<button data-toggle="modal" data-target="#commentModal" item="${count}" type="button" class="btn btn-primary btn-sm" onClick="showMovieComments(this)">Comments</button>
</div>
</div>
</div>
</div>                                                                                                   
</div>
`;

,

• 避免使用内联CSSstyle
• <button>不能有href=""属性
• 和删除内联JS的on*处理器。

<button item="${count}" type="button" class="app-btn-details btn btn-primary btn-sm" data-toggle="modal" data-target="#movieModal" >See More</button>
<button item="${count}" type="button" class="app-btn-comments btn btn-primary btn-sm" data-toggle="modal" data-target="#commentModal" >Comments</button>

const ELS_btnDetails = document.querySelectorAll(".app-btn-details");
const ELS_btnComments = document.querySelectorAll(".app-btn-comments");
ELS_btnDetails.forEach((EL) => EL.addEventListener("click", showMovieDetails)); 
ELS_btnComments.forEach((EL) => EL.addEventListener("click", showMovieComments));