Question

我有一个html＆amp; PHP代码（文章），我需要在网站上克隆它。 php变量在每篇文章中都必须有不同的id。（我有$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）

如果商家信息超过7个，请添加更多按钮以取消隐藏(.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;
}

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

使用Node Clone重复HTML / PHP代码

1 个答案: