此代碼缺少什麼？

我試圖讓點擊時綠色的圓形在紅色和綠色之間交替。代碼看起來很好，但它不起作用，所以一定是錯的。我在做什麼初學者錯誤？此代碼缺少什麼？

$("#greenCircle").click(function() { 
 
    console.log($("#greenCircle").css("background-color")); 
 
    if ($("#greenCircle").css("background-color") == "red") { 
 
    $("#greenCircle").css("background-color", "green"); 
 
    } else { 
 
    $("#greenCircle").css("background-color", "red"); 
 
    } 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

我要去絕對瘋了！我只是做一個簡單的jQuery動畫，而且它只是不起作用。一切看起來正確。我甚至去切換文本編輯器，什麼都沒有。這是動畫的代碼。

<!DOCTYPE html> 
<html> 

<head> 
    <title>JQuery</title> 

    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="jQuery Practice.css"> 

</head> 
<body> 
    hello 

    <div id="circle"></div> 

    <script type="text/javascript"> 

     $("#circle").click(function(){ 

     $("#circle").animate({Width:"400px"}, 2000); 

     }); 

    </script> 

</body>

#circle{ 
width: 150px; 
height: 150px; 
background-color: green; 
border-radius: 50%; 
}

來源

2017-11-10 Reese

你得到什麼行爲？ –

IIRC，使用css獲取作爲顏色的字段的值將以rgb（）格式返回值，而不是「紅色」或「綠色」。這很容易做到這一點最有可能的類 – Taplar

如果你想要去的這種方法only-的RGBa（紅色，藍色，綠色，阿爾法 - 不透明度）表示顏色的計算值，而不是以顏色名稱（如紅色，藍色，橙色，透明等）或十六進制值表示。

$("#greenCircle").click(function() { 
 
    if ($("#greenCircle").css("background-color") == 'rgb(255, 0, 0)') { 
 
    $("#greenCircle").css("background-color", "green"); 
 
    } else { 
 
    $("#greenCircle").css("background-color", "red"); 
 
    } 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

來源

2017-11-10 21:51:29

由於CSS將返回RGB格式的顏色，使用的一類，你可以打開/關閉將使這容易得多。

$("#greenCircle").click(function() { 
 
    $("#greenCircle").toggleClass('red'); 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
#greenCircle.red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

來源

2017-11-10 21:50:19 Taplar

$("#greenCircle").css("background-color")返回解析的顏色等"rgb(0, 128, 0)"，這是不等於"red"或"green"。

如果您使用課程設置顏色，則會更簡單，那麼您可以使用toggleClass()。

$("#circle").click(function() { 
 
    $(this).toggleClass("greenCircle redCircle"); 
 
});

#circle { 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 
.greenCircle { 
 
    background-color: green; 
 
} 
 
.redCircle { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="circle" class="greenCircle"></div>

來源

2017-11-10 21:50:34 Barmar

的CSS（「背景色」）方法不會在你的風格屬性，但一個RGB（）返回值實際值。嘗試使用的console.log來看看如何變化值的變化後：

console.log($("#greenCircle").css("background-color"));

也許我提出一個簡單的替代方法：

<style> 
    #circle { 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
    } 
    #circle.green{ 
    background-color: green; 
    } 
    #circle.red{ 
    background-color: red; 
    } 
</style> 
<script> 
    $("#circle").click(function(){ 
    $(this).toggleClass('red', 'green'); 
    }); 
</script> 
<div id="circle" class="green"></div>

來源

2017-11-10 21:51:01 Nicolas

因此，代碼是乾淨多了。

$("#greenCircle").click(function() { 
 
    $(this).toggleClass("red"); 
 
});

#greenCircle { 
 
    background-color: green; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
#greenCircle.red { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenCircle"></div>

來源

2017-11-10 21:52:34 Nick

謝謝。我正在做一個Udemy教程，導師採取了這種方法。它似乎對他正確工作。這真的讓我很煩惱。當我需要使用它時，我會尋求其中一種選擇。 – Reese

只需添加該代碼並更改ID，以類

$(".red").click(function() { 
    $(this).toggleClass('greenCircle red'); 
});

.greenCircle { 
    background-color: green; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
} 
.red { 
    background-color: #f00; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class="red"></div>

來源

2017-11-10 21:55:27 samehanwar

此代碼缺少什麼？

回答

相關問題