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

回答

相關問題