jquery - （如果css = A）做B

我想代码以下：在我的HTML我有3个div与个人ID。显示div1，而div2和div3不显示。我想通过点击箭头来切换块的可见性。点击右侧的箭头将改变＃div1和＃div2的可见性（div1不会显示，div2会显示）。但是我无法管理我的jQuery中的if/else。jquery - （如果css = A）做B

这是我目前使用的代码：

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") {

来源

2016-02-05 nootaku

代码不正确甚至解析。修正语法错误（在示例中至少有3种不同的语法错误类型），然后再尝试执行其他任何操作。 – user2864740

您是否试过'==='而不是'=='，或者强制小写的属性？ –

'elseif'无效。它应该是'else if' –

如果你已经在使用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>

来源

2016-02-05 00:24:00 twernt

这是一个更简单的版本https://jsfiddle.net/ojg78qpv/ –

@JasonSperske很酷！ – twernt

@JasonSperske不知道为什么，但代码的复制粘贴也适用于我的页面。 – nootaku

jquery - （如果css = A）做B

回答

相关问题