Jquery - (如果 css = A)做 B

Question

我正在尝试编写以下代码:在我的 HTML 中，我有 3 个带有个人 ID 的 div。 div1 显示，而 div2 和 div3 不显示。 我想通过单击箭头来交换 block 的可见性。单击右侧的箭头将更改#div1 和#div2 的可见性(div1 不会显示，div2 会显示)。 但是我无法在我的 jquery 中管理 if/else。

这是我目前使用的代码:

CSS

#vid2, #vid3 {display: none;}

JQUERY

$(document).ready(function(){
$("#arrowright").click(function(){
    if($("div#vid1").css("display" "block")) {
        $("div#vid1").css("display" "none");
        $("div#vid2").css("display" "block");
    }
    else if($("div#vid2").css("display" "block")) {
        $("div#vid2").css("display" "none");
        $("div#vid3").css("display" "block");
    }
    else {
        $("div#vid3").css("display" "none");
        $("div#vid1").css("display" "block");
});

我已经尝试过以下方法:

if ($("#vid1").css("display") == "block") {

Answer 1

如果您已经在使用 jQuery，您可以使用 hide()、show() 和 使代码更简单、更易于阅读:可见。

$(function() {
  $('#vid2, #vid3').hide();
  $('#arrowright').click(function() {
    if ($('#vid1').is(':visible')) {
      $('#vid1').hide();
      $('#vid2').show();
    } else if ($('#vid2').is(':visible')) {
      $('#vid2').hide();
      $('#vid3').show();
    } else {
      $('#vid3').hide();
      $('#vid1').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="vid1">vid1</div>
<div id="vid2">vid2</div>
<div id="vid3">vid3</div>
<button id="arrowright">arrowright</button>