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

你不能像IG所说的那样直接定位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。

单击更改iframe元素的类

1 个答案: