javascript - 使用 event.target 在单击时更改 iframe src attr

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 来改变相同的东西，因为有很多相似的 class。请使用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) 是被点击元素的对象，find('iframe') 会在被点击元素中找到 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>