无法单击更改的 iframe 中的按钮

Question

您好，我正在制作一个 html 页面，用户可以单击 3 个跨度，每个跨度都可以更改下面的 iframe src。每个 span 都与自己的 html 页面相关联，当点击 span 时，它会将 iframe 更改为自己的 html 页面。

问题是每个 html 页面都有自己的按钮和不同的按钮等，在我的 js 文件中，我尝试将 .click() 添加到每个按钮，并且由于某种原因，唯一的 click() 适用于主 iframe是更改前 iframe 的主 src。

这是 HTML：

<div class="form-group"> 
    <span id="Frame1" class="bla">test 1</span> 
    <span id="Frame1" class="bla">test 2</span> 
    <span id="Frame3" class="bla">test3</span> 
</div>
<iframe src="test_1_Frame.html" style="width: 870px; height: 436px; border: 0;background-color:transparent;" id="frame">

代码如下：

$(".bla").click(function(e) {
    e.preventDefault();
    $("#frame").attr("src", $(this).attr("id")+".html");
    let currentFrame = $(this).attr("id");
    console.log(currentFrame);

    if (currentFrame == "Frame1") {
        console.log(currentFrame);


    } else if (currentFrame == "Frame2") {
        console.log(`${currentFrame} should be Frame2`);

    } else if (currentFrame == "Frame3") {
        console.log(`${currentFrame} should be Frame3`);

    }
});

然后对于点击部分我这样做了：

$(function() {
    $("#frame1_button").click(function() {
        console.log('frame1');

    })
    $("#frame2_button").click(function() {
        console.log('frame2');

    })
     $("#frame3_button").click(function() {
        console.log('frame3');

    })
});

这些按钮中的每一个都是每个 HTML 框架中的不同按钮。但由于某种原因，当我按下 frame1_button 时，只有“frame1”会登录控制台，但当我按下 frame2 或 frame 3 按钮时，控制台中没有任何记录。

当我进入控制台并尝试直接输入以单击按钮时，没有任何反应（未按下按钮），这是我得到的响应：

如果有人知道为什么会发生这种情况，我将非常感谢您的帮助，在此先感谢。

（也不是什么大问题，但我真的很想更改当前选定跨度的背景颜色，所以如果有人知道该怎么做，我将不胜感激答案或评论）。

Answer 1

这个怎么样？

<div class="form-group"> 
    <span id="Frame1" onclick=doSomething(this)>test 1</span> 
    <span id="Frame2" onclick=doSomething(this)>test 2</span> 
    <span id="Frame3" onclick=doSomething(this)>test3</span> 
</div>

<script>
var doSomething = function(element){
console.log(element.id + " was clicked");
}
</script>

With a code pen here..

使用onclick，您可以使用this 传递元素，然后访问id。