有什么想法可以使用 while 或其他方法将此代码传输到 php 或 js 吗？ [关闭]

Question

我有这段代码，我想使用 while 或类似的方法将其传输到 php 或 js。

<div class="contenedor canales">
    <div class="thumb">
        <a href="Accion.html">
            <img title="Accion" src="img/thumbs/megamovieshd.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Accion" href="Accion.html">Accion</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Bob-Esponja.html">
            <img title="Bob Esponja" src="img/thumbs/mega_bobesponja.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Bob Esponja" href="Bob-Esponja.html">Bob Esponja</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Caballeros-Del-Zodiaco.html">
            <img title="Caballeros Del Zodiaco" src="img/thumbs/mega_bot.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Caballeros Del Zodiaco" href="Caballeros-Del-Zodiaco.html">Caballeros Del Zodiaco</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Disney-Pixar.html">
            <img title="Disney &amp; Pixar" src="img/thumbs/mega_kids.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Disney &amp; Pixar" href="Disney-Pixar.html">Disney &amp; Pixar</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Dragon-Ball-Z-GT.html">
            <img title="Dragon Ball Z &amp; GT" src="img/thumbs/mega_animes.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Dragon Ball Z &amp; GT" href="Dragon-Ball-Z-GT.html">Dragon Ball Z &amp; GT</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Drama-y-Romance.html">
            <img title="Drama Y Romance" src="img/thumbs/mega_movieshd.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Drama &amp; Romance" href="Drama-y-Romance.html">Drama &amp; Romance</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="El-Chavo-Del-8.html">
            <img title="El Chavo Del 8" src="img/thumbs/mega_chavo.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="El Chavo Del 8" href="El-Chavo-Del-8.html">El Chavo Del 8</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Familia-Peluche.html">
            <img title="Familia Peluche" src="img/thumbs/mega_familia.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Familia Peluche" href="Familia-Peluche.html">Familia Peluche</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Los-Simpson.html">
            <img title="Simpson" src="img/thumbs/mega_simpson.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Simpson" href="Los-Simpson.html">Los Simpson</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Malcolm.html">
            <img title="Malcolm" src="img/thumbs/megamalcolm.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Malcolm" href="Malcolm.html">Malcolm</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Pokemon.html">
            <img title="Pokemon" src="img/thumbs/mega_animeshd.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Pokemon" href="Pokemon.html">Pokemon</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="SouthPark.html">
            <img title="SouthPark" src="img/thumbs/mega_revolucionhd.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="SouthPark" href="SouthPark.html">SouthPark</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Terror.html">
            <img title="Terror" src="img/thumbs/mega_extremo.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Terror" href="Terror.html">Terror</a>
        </h4>
    </div>
    <div class="thumb">
        <a href="Vecinos.html">
            <img title="Vecinos" src="img/thumbs/mega_vecinos.jpg" alt=""/>
        </a>
        <h4 class="txt-oculto">
            <a title="Vecinos" href="Vecinos.html">Vecinos</a>
        </h4>
    </div>
</div>

Answer 1

这是一个 PHP 示例

<?php
    $arr_data['Accion'] = array('picture' => 'img/thumbs/megamovieshd.jpg', 'html' => 'Accion.html');
    $arr_data['Bob Esponja'] = array('picture' => 'img/thumbs/mega_bobesponja.jpg', 'html' => 'Bob-Esponja.html');
?>

<div class="contenedor canales">
<?php foreach($arr_data AS $name => $arr_details){ ?>
        <div class="thumb">
            <a href="<?php echo $arr_details['html']; ?>">
                <img title="<?php echo $name; ?>" src="<?php echo $arr_details['picture']; ?>" alt=""/>
            </a>
            <h4 class="txt-oculto">
                <a title="<?php echo $name; ?>" href="<?php echo $arr_details['html']; ?>"><?php echo $name; ?></a>
            </h4>
        </div>
<?php } ?>
</div>

Answer 2

我将为您提供 JavaScript 解决方案。您可以创建一个数组，该数组将存储您的所有拇指，然后它将动态创建此列表：

var thumbs = [
  {
    'href': 'Accion.html',
    'image': 'img/thumbs/megamovieshd.jpg',
    'title': 'Accion'
  },
  {
    'href': 'Bob-Esponja.html',
    'image': 'img/thumbs/mega_bobesponja.jpg',
    'title': 'Bob-Esponja'
  }
];

thumbs.forEach(function(thumb) {
  $("<div/>").addClass('thumb')
    .append(
      $('<a/>').attr('href', thumb.href)
        .append(
          $("<img/>").attr({
            src: thumb.image,
            title: thumb.title,
            alt: ''
          })
        )
    )
    .append(
      $('<h4/>').addClass('txt-oculto')
        .append(
           $("<a/>").attr({
             title: thumb.title,
             href: thumb.href
           })
        )
    )
    .appendTo('.canales');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor canales"></div>

然而，JavaScript 解决方案不正确。它绝对应该使用 PHP 在服务器端生成。我不会为此提供解决方案。
借助JS方案，尝试自己实现PHP方案。