用节点克隆重复一个HTML/PHP代码

Question

我有一个html代码（文章），我需要克隆它的网站上的&。 （我有$variablex[n]，$variablez[n]，其中n =必须是1,2,3 ...... 默认情况下，我需要在网站上显示7篇文章。 当我按下加载更多按钮可显示2个+等 我可以做上述所有的事情，我的意思是它可能 我已经创建了小提琴：？？jsfiddle所以可以更容易理解

原谅我缺乏jQuery的经验/ JavaScript我更多的是一个HTML/CSS

Answer 1

不要做两个更多的东西，只是把它们全部放在那里

如果您必须使用document.getElementById（）。style.display ='none'; （请参阅我为每篇文章添加了一个ID）来隐藏溢出。

把你的jsfiddle代码的循环中显示所有房源

添加JS隐藏溢出（大于7）

如果有超过7B列表，添加更多按钮取消隐藏(.style.display = 'block')下两个列表。

注意：它似乎你从WordPress了解到你的PHP风格。不要这样做。为您的HTML回声使用Heredoc语法。
Link to PHP Manual: Heredoc Syntax

<?php 
$pret1=$hotelPrices[0]; 
$pretdiscount = $pret1 + ($pret1 * 0.20); 
$availability = $checkAvailability->searchId; 
echo <<<EOT 
<article class="box" data-stars="$StarRating[0] name="$hotelName[0]" data-price="$pretdiscount"> 
<figure class="col-sm-5 col-md-4"> 
<a title="" href="https://www.bookingassist.ro/test/html/ajax/slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="160" alt="" src="$img[0][1]"></a> 
</figure> 
<div class="details col-sm-7 col-md-8"> 
<div><div> 
<h4 class="box-title">$hotelName[0]<small><i class="soap-icon-departure yellow-color"></i>$hotelAddress[0], $hotelDestination[0], $Countryl</small></h4> 
<div class="amenities"> 
<i class="soap-icon-wifi circle"></i> 
<i class="soap-icon-fitnessfacility circle"></i> 
<i class="soap-icon-fork circle"></i> 
<i class="soap-icon-television circle"></i> 
</div></div><div> 
<div class="stars-$StarRating[0]-container"> 
<span class="stars-$StarRating[0]" style="width: 80%"></span> 
</div></div></div> 
<div> 
<p>Pretul include cazare in camera tip $roomCattegory[0] cu masa tip $boardType[0]</p> 
<div> 
<span class="price"><small>pret/Sejur</small>€$pretdiscount<br/></span> 
<form action="hotel-detailed.php" method="post"> 
<input type="hidden" name="In" value="$In" /> 
<input type="hidden" name="Out" value="$Out" /> 
<input type="hidden" name="hotel" value="$hotelCodes[0]" /> 
<input type="hidden" name="searchId" value="$availability"/
<input type="hidden" name="Adults" value="$Adults" /> 
<input type="hidden" name="Childs" value="$Childs" /> 
<input type="hidden" name="Offer1code" value="$hotelCodes[1]" /> 
<input type="hidden" name="Offer2code" value="$hotelCodes[2]" /> 
<input type="hidden" name="Offer3code" value="$hotelCodes[3]" /> 
<input type="hidden" name="Offer1pret" value="$hotelPrices[1]" /> 
<input type="hidden" name="Offer2pret" value="$hotelPrices[2]" /> 
<input type="hidden" name="Offer3pret" value="$hotelPrices[3]" /> 
<button type="submit"class="button btn-small full-width text-center">Detalii<small></small></button> 
</form> 
</div></div></div> 
</article> 
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div> 
EOT; 
unset($ratesPerNight); 
unset($roomsInfo); 
unset($roomResponse); 
?> 

更改这个来自：

</article> 
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div> 
EOT; 

要：

</article> 
EOT; 
if ($id > 7){ 
echo <<<EOT 
<button onclick="more()">More</button>' 
<script type="text/javascript"> 
//<![CDATA[ 
var current = 7; 
var max = $id; 
var articles = document.getElementsByTagName("article"); 
for (var a = 7,a < articles.length,a++){ 
    articles[a].style.display = 'none'; 
} 
function more(){ 
    if (current < max){current++;articles[current].style.display = 'block'; 
    if (current < max){current++;articles[current].style.display = 'block'; 
} 
//]]></script> 
EOT; 
} 

每次更多的按钮被按下两个文章将出现。