Javascript 单击更改iframe元素的类

我有一个特定类别的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>

---

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

您不能像I.G所说的那样直接针对iframe，您需要在iframe上设置一些可以在您的网页上控制的内容，我在JSFIDLE上写了一些东西，请尝试看看它是否是您想要的：

点击这里
$（“#播放器跨度”）。单击（函数（）{
//警报（1）；
$（“#soundcloudtrack”）.toggleClass（'SoundCloudSoundCloudExt'）；
警报（$（“#soundcloudtrack”）.attr（“类”）；
/*document.getElementById（“soundcloudtrack”）.className=“soundcloudext”*/
});
.声云{
z指数：0；
宽度：100%；
高度：62px；
不透明度：0.25；
}
.soundcloudext{
z指数：99997；
宽度：100%；
高度：135px；
不透明度：1；
}
#玩家{
位置：Relative；
z指数：999；
宽度：100%；
高度：自动；
}
#球员跨度{
位置：绝对位置；
高度：20px；
顶部：40px；
不透明度：0；
z指数：999；
文本对齐：居中；
宽度：100%；
}

---

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

感谢您的第一个解决方案！同时，根据您的建议，我找到了关于SoundCloudAPI的信息，但我不确定我应该使用这个页面（）还是这个页面（）。我正在努力，但没有成功。您能告诉我您将如何使用此信息来处理iframe“.click（）”事件吗？如果这是离题，我会私下发短信给你！嗯，是的，这就是你应该结帐的地方。但是，尽管如此，你还是不需要在模仿“iframe点击”事件的过程中制定一些“操作”，你无法处理这个问题，换句话说，iframe是一种从SoundCloud为你提供播放器的方式，你不能完全控制它。因此，其中一件事，取决于你想做什么，就是跟踪播放/暂停事件，并对那些假设用户会点击播放器的事件采取行动。

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

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

<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%;
}