Question

以下是我的代码。

每当我点击song1时，我都需要获得相应的id和属性。

<div>
    <iframe id="songs" src="song.html">
        <div id="song1" class="sngs" name="song123">song1</div>
        <div id="song2" class="sngs" name="song122">song2</div>
        <div id="song3" class="sngs" name="song121">song3</div>
    </iframe>
</div>

这就是我在这里做的事情：

$(document).ready(function(){
    $("iframe").click(function(){
        var currentsongName=$("iframe").contents().find("#"+this.id).getAttribute("name");
        console.log(currentsongName);
       playsong(currentsongName);
    });
});

但是这里的this.id正在发布其他内容。那么如何才能获得我点击的div的id及其属性？

Answer 1

使用索引

检索本机元素

var currentsongName=$("iframe").contents().find("#"+this.id)[0].getAttribute("name");

或使用等同于attr()

的jQuery

var currentsongName=$("iframe").contents().find("#"+this.id).attr("name");

Answer 2

您必须确保iframe在托管jQuery脚本（容器）的同一服务器和相同端口上显示某些内容，然后您可以通过其文档对象访问iframe：

$($('iframe')[0].document, 'div.sngs').click(function(){
  console.log($(this).html());
});

Answer 3

您没有名称TAG ...添加或改为使用id。

$('iframe div.sngs').click(function(){
     console.log($(this).attr("id"));
     //now play song with id... 
});

如何访问iframe中的div属性（点击事件）？

3 个答案: