javascript - 使用 Node Clone 重复 HTML/PHP 代码

Question

我有一个 html 和 php 代码(文章)，我需要在网站上克隆它。php 变量在每篇文章中必须具有不同的 id。(我有 $variablex[n]、$variablez[n]，其中 n = 必须为 1、2、3。 ....ñ默认情况下，我需要在网站上显示 7 篇文章。当我按下“加载更多”按钮以显示 2 个以上时，依此类推。我可以做以上所有事情吗？我的意思是可能吗？我创建了 fiddle :jsfiddle所以它可以更容易理解。

请原谅我缺乏使用 jquery/javascript 的经验，我更喜欢 HTML/CSS。

Answer 1

不要再做负载两件事。把它们都放在那里。

如果必须，使用 document.getElementById().style.display = 'none'; (请参阅我为每篇文章添加了一个 id)以 overflow hidden 。

将您的 jsfiddle 代码放入一个显示所有列表的循环中

添加JS overflow hidden (大于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;
}

每次点击“更多”按钮时，都会出现另外两篇文章。