jquery - jQuery-(如果css = A)执行B

我正在尝试编写以下代码：在我的HTML中，我有3个具有单独ID的div。
显示div1，但不显示div2和div3。
我想通过单击箭头来交换块的可见性。单击右侧的箭头将更改＃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") {

最佳答案

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

$(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>

关于jquery - jQuery-(如果css = A)执行B，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35214066/