Question

简要说明：需要在单击时更改iframe src。由于某些原因，我希望使用event.target而不是其他任何方法。

我正在尝试使用以下代码实现相同目的，但无法正常工作，请进行指导：

html代码：

<div id="div2" class="sim-row-edit-video">
<iframe class="frame" width="auto" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

请不要使用class或id更改相同的内容，因为有许多具有相似类的内容。请使用event.target

js代码：

$(".sim-row-edit-video").click(function(){
    alert("video clicked");
    $(event.target).attr('src', 'https://www.youtube.com/embed/drOnSwo1Ob0');

//event.target.src = 'https://cdn.iconscout.com/icon/free/png-256/car-location-find-navigate-gps-location-29571.png';
});

如何更改点击的iframe的src？

Answer 1

您可以使用$(this).find('iframe')。这里$(this)是clicked元素的对象，find('iframe')将在clicked元素内找到iframe元素。以下代码段是基于您提供的代码的示例。

$(".sim-row-edit-video").click(function(){
    console.log("video clicked");
    console.log("old src: " + $(this).find('iframe').attr('src'));
    $(this).find('iframe').attr('src', 'https://www.youtube.com/embed/drOnSwo1Ob0');
    console.log("new src: " + $(this).find('iframe').attr('src'));
//event.target.src = 'https://cdn.iconscout.com/icon/free/png-256/car-location-find-navigate-gps-location-29571.png';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" class="sim-row-edit-video">
<iframe class="frame" width="auto" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

使用event.target在点击时更改iframe src属性

1 个答案: