Question

在Visual Basic中动态引入此块。

foreach (Helper.Webinar webinar in ViewBag.Webinars){
<a href="@Url.Action("Webinars", "Learning", new { name = webinar.ContentFileName })" class="link-block">
    <div class="jumbotron left-right-jumbotron-block webinar-block">
    <div class="webinar-item-1"></div>
    <div class="webinar-item-2"></div>
    </div>
</a>
}

我正在尝试使用上面的个人ID分配tp。就目前而言，我可以用数组中的最后一个图像填充上面的每一个。我试图弄清楚如何根据我在数组中的ID数量来填充每个块。

const youtubeImgSort = () => {
const ids = [

    "", // leave blank
    "LJ3opnisLmk",
    "zTqLkVurK-A",
    "9PDexf_6HH0", 
    "wMmXGNmrr7I" 
];

$(".webinar-item-1").empty().append('<div class="vid-state"><img class="webThumb" alt="Webinar Preview Thumbnail"/></div>');

for (let i = 0; i < ids.length; i++) {

    $('.webThumb').attr('src', 'https://img.youtube.com/vi/' + ids[i] + '/0.jpg').after('<i class="fa fa-clock-o"></i>');
    };

};

youtubeImgSort();

Answer 1

根据索引分配一个id，然后使用jquery id选择器找到要附加youtube缩略图的单个div元素。

Answer 2

我还不确定你的Visual Basic代码究竟产生了什么（是循环还是生成多个webinar-item-*？）以及需要在Javascript中发生什么。

这是一个演示，我将jQuery语句填充到webinar-item-*循环并用正确的图像填充它。我假设Visual Basic为webinar-item-*生成了几个可能不正确的HTML div。您可以在js中生成webinar-item-*，但我不确定其余数据是什么样的。

＆＃13;

const youtubeImgSort = () => {
  const ids = [

      "", // leave blank
      "LJ3opnisLmk",
      "zTqLkVurK-A",
      "9PDexf_6HH0", 
      "wMmXGNmrr7I" 
  ];

  for (let i = 0; i < ids.length; i++) {
     $(".webinar-item-" + i)
       .empty()
       .append('<div class="vid-state"><img class="webThumb" src="https://img.youtube.com/vi/' + ids[i] + '/0.jpg" alt="Webinar Preview Thumbnail" /><i class="fa fa-clock-o"></i></div>');
  }

};

youtubeImgSort();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webinar-item-0"></div>
<div class="webinar-item-1"></div>
<div class="webinar-item-2"></div>
<div class="webinar-item-3"></div>
<div class="webinar-item-4"></div>

＆＃13;

如何将数组中的单个youtube图像分配给也是动态的div

2 个答案: