jquery 更改每个匹配锚链接上嵌入内部的链接

xzv2uavs 于 2023-05-22 发布在 jQuery

关注(0)|答案(1)|浏览(131)

我使用的是一个非常有限的系统，不允许直接编辑HTML，所以我想添加的任何东西都只能通过Javascript / JQuery（我还是个新手）。
我想做的是：

标识具有匹配模式的链接
存储其href值
插入HTML代码以显示iframe
将iframe引用的video href替换为之前存储的href
为页面上的每个匹配href循环

到目前为止，我已经能够让iframe显示正确的视频，但是，如果我添加多个匹配的链接-但不同的视频/href-结果是完全相同的嵌入视频重复。
以下是我目前为止的代码：

$('a[href*=\"https://app.application.io/recordings/\"]').each(function(index,item){
  var applicationEmbed = $(this).attr("href");
  var applicationiFrame = '<div class=\"video-embed\" style=\"position: relative; padding-bottom: 50.5%; height: 0;\"><iframe src=\"' + applicationEmbed + '/embed\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"></iframe></div>'
    $("a[href*=\"https://app.application.io/recordings/\"]").replaceWith(applicationiFrame);
    });

有什么建议吗？

jquery

来源：https://stackoverflow.com/questions/76274553/change-the-link-inside-of-an-embed-on-each-matching-anchor-link

1条答案

按热度按时间

6g8kf2rb1#

这是因为最后一行告诉脚本将链接模式$("a[href*=\"https://app.application.io/recordings/\"]")的每个示例替换为单个值replaceWith(applicationiFrame)，这使得它们都相同。这里有另一种方法，我是如何使用模板文字来帮助可读性的.

$('a[href*=\"https://app.application.io/recordings/\"]').each(function(index, item) {
  let applicationEmbed = $(item).attr("href");
  let applicationiFrame = `
  <div class="video-embed" style="position: relative; padding-bottom: 50.5%; height: 0;">
  <iframe src="${applicationEmbed}/embed" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
  </div>`
  $(item).before(applicationiFrame).remove()
});

.video-embed {
  border: 1px solid #666;
  background: #dedede;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://app.application.io/recordings/1">Test link</a><br />
<a href="https://app.application.io/recordings/2">Test link</a><br />
<a href="https://app.application.io/recordings/3">Test link</a><br />
<a href="https://app.application.io/recordings/4">Test link</a><br />

赞(0）回复(0）举报 2023-05-22

我来回答

jquery 更改每个匹配锚链接上嵌入内部的链接

1条答案

相关问题

热门标签

最新问答