用節點克隆重複一個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; 
} 

每次更多的按鈕被按下兩個文章將出現。