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

Question

您好，我正在制作一个html页面，用户可以单击3个跨度，每个跨度都可以更改下面的iframe src。每个范围都与自己的html页面相关联，单击范围时，会将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。