将css属性添加到jquery中具有相同类的所有div

时间：2016-12-27 05:41:41

标签： jquery html css

我有多个具有相同类名的div。我想对所有在playbutton click中使用相同类名的div应用css'z-index：99'。使用jquery.Working仅用于第一个Play Button.I想要触发所有播放按钮单击

jQuery(document).ready(function($) {
  $("#playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}
#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：3)

您不能对多个元素#video-container和#playButton使用相同的ID，请尝试使用类。

$(".playButton").click(function() {
   $(".close_icon").css('display', 'block');
   $(".video-container").css('z-index', '99');
   $(".videoThumbnail").css('z-index', '99');
});

答案 1 :(得分：2)

而不是将id="playButton"提供给播放按钮。将其更改为class="playButton"。由于选择Id jquery只选择一个元素

jQuery(document).ready(function($) {
  $(".playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}
#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>

答案 2 :(得分：2)

您已使用相同的id定义了多个元素。 Id必须是唯一的。此外，您应该找到closest div，其中包含content和find个元素，以便css应用jQuery(document).ready(function($) { $(".playButton").click(function() { $(this).closest("div.content").find(".close_icon").css('display', 'block'); $(this).closest("div.content").find(".video-container").css('z-index', '99'); $(this).closest("div.content").find(".videoThumbnail").css('z-index', '99'); }); $('iframe').load(function() { $('iframe').contents().find("head") .append($("<style type='text/css'> iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;} </style>")); }); $(".close_icon").click(function() { $(this).closest("div.content").find(".video-container").css('z-index', '0'); $(this).closest("div.content").find(".close_icon").css('display', 'none'); $("#header").show(); }); }); function callPlayer(frame_id, func, args) { if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id; var iframe = document.getElementById(frame_id); if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') { iframe = iframe.getElementsByTagName('iframe')[0]; } if (iframe) { // Frame exists, iframe.contentWindow.postMessage(JSON.stringify({ "event": "command", "func": func, "args": args || [], "id": frame_id }), "*"); } }而不是全部。

#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
Textview tv1 = findviewbyid(r.id.textview1);
tv1.setText(Float.toString(dronespeed));

相关问题
最新问题