javascript - 单击更改 iframe 元素的类

Question

我有一个特定类的 iframe(soundcloud 嵌入式轨道)。 我想要的是，当我点击 iframe 时，它​​的类会更改为另一个具有不同属性的类。

我的代码是: index.html

<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&amp;color=00ffc6&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_artwork=false&amp;show_reposts=false"></iframe>

<script>
  $('#soundcloudtrack').click(
     function (v) {
       $(this).toggleClass('soundcloud soundcloudext');
       /*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
     }
  );
</script>

和 style.css:

.soundcloud{
    z-index:99997;
    width:100%;
    height:62px;
    opacity:0.25;
}

.soundcloudext{
    z-index:99997;
    width:100%;
    height:135px;
    opacity:1;
  }

但它不起作用，我不明白为什么。我也尝试过使用 getElementById。你能帮忙吗？

Answer 1

你不能真正像 I.G 所说的那样直接定位 iframe，你需要在 iframe 上设置一些你可以在你的网页上控制的东西，我在 jsfiddle 上写了一些东西，请试试看它是否是你正在寻找的: https://jsfiddle.net/652ejv6j/#run .

<div id="player">
  <span>click here</span>
  <iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&amp;color=00ffc6&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_artwork=false&amp;show_reposts=false"></iframe>

</div>



 $('#player span').click(function() {
 //alert(1);
 $("#soundcloudtrack").toggleClass('soundcloud soundcloudext');
    alert($("#soundcloudtrack").attr("class"));
  /*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
});

.soundcloud {
  z-index: 0;
  width: 100%;
  height: 62px;
  opacity: 0.25;
}

.soundcloudext {
  z-index: 99997;
  width: 100%;
  height: 135px;
  opacity: 1;
}

#player {
  position: relaitve;
  z-index: 999;
  width: 100%;
  height: auto;
}

#player span {
  position: absolute;
  height: 20px;
  top: 40px;
  opacity: 0;
  z-index: 999;
  text-align: center;
  width: 100%;
}

ALT 检查您的播放器是否有可以直接控制的 API。