我不知道如何做OnClick事件來改變方塊的顏色

-1

我是這個東西的初學者，所以如果有人能幫我解決這個問題，我將不勝感激。我知道你最這是一個非常簡單的代碼，但對我來說，就像超級難的xD我不知道如何做OnClick事件來改變方塊的顏色

好了，所以我的HTML是這樣的：

<html> 
<head> 
    <title> Div, class, id </title> 
    <link rel="stylesheet" href="stylesheets/style.css"/> 

    <script type="text/javascript" src="javascripts/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="javascripts/jFunc.js"></script> 





</head> 
<body> 

    <div id="Blue" class="yellow"></div> 
    <div id="Red" class="Green"></div> 
</body>

我的CSS是這樣的：

body { 
color: #a280e2; 
font: 1.2em/1.4em 'Myriad Pro', Helvetica, Arial, Sans-serif,; 
text-align: left; 
margin: 0px; 
} 


.yellow { 
background: yellow; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

.green { 
background: green; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

#Blue { 
background: #2700ff; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

#Red { 
background: #ff0000; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
}

也試過此javascript：

$(".yellow").on("click", function() { 
$(this).toggleClass(".yellow");});

所以基本上我想要藍色方塊變成黃色當我點擊它，當我點擊紅色時它應該變成綠色。如果可能的話，每當你點擊一個點擊需求時，彈出提示會出現顏色已經改變。

感謝您提前:)你的一切幫助

來源

2015-08-22 Pink Unicorn

你有沒有嘗試過任何JavaScript代碼？ –

試過這個，但我不知道這是如何工作的，只是開始學習它。（「click」，function（）{ $（「。yellow」）; on（「click」，function（）{（this）.toggleClass（「。yellow」）; }）; –

將此添加到帖子中。我們很容易找到問題。 –

toggleClass()將做的伎倆。檢查工作小提琴http://jsfiddle.net/MasoomS/L55qbp1j/1/

來源

2015-08-22 10:32:55 Masoom

謝謝soooo多！ –

答案應該包含答案正文本身的所有必要信息。您的答案隱藏在鏈接後面。請在答案中包含您鏈接的相關部分。 – Sumurai8

只是一個事件監聽添加到您的div：

JS：

var myFirstDiv = document.querySelector('#Blue'); //Gets the divs with their ids 
var mySecondDiv = document.querySelector('#Red'); 

myFirstDiv.addEventListener('click', function() { //Registers the EventListeners 
    //The code here is executed when you click on myFirstDiv(= #Blue) 
    myFirstDiv.style.backgroundColor = 'yellow'; 
    alert('First Div changed!'); 
} 

mySecondDiv.addEventListener('click', function() { 
    mySecondDiv.style.backgroundColor = 'green'; 
    alert('Second Div changed!'); 
}

JS（使用jQuery）：

var myFirstDiv = $('#Blue'); 
var mySecondDiv = $('#Red'); 

myFirstDiv.on('click', function() { //Registers the EventListeners 
    //The code here is executed when you click on myFirstDiv(= #Blue) 
    $(this).css({backgroundColor: 'yellow'}); 
    alert('First Div changed!'); 
} 

mySecondDiv.on('click', function() { 
    $(this).css({backgroundColor: 'green'}); 
    alert('Second Div changed!'); 
}

來源

2015-08-22 10:31:48 Lauromine

使用下面的Java腳本代碼段會做的伎倆

<script> 
$(document).ready(function() { 
console.log("ready!"); 
$("#Blue").click(function() { 
$('#Blue').css('background-color', 'yellow'); 
alert("Color Changed"); 
}); 
$("#Red").click(function() { 
$('#Red').css('background-color', 'green'); 
alert("Color Changed"); 
}); 
}); 

</script>

這裏是你可以使用演示完整的HTML文件。

<html> 
<head> 
    <title> Div, class, id </title> 
    <link rel="stylesheet" href="stylesheets/style.css"/> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<style> 
body { 
color: #a280e2; 
font: 1.2em/1.4em 'Myriad Pro', Helvetica, Arial, Sans-serif,; 
text-align: left; 
margin: 0px; 
} 


.yellow { 
background: yellow; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

.green { 
background: green; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

#Blue { 
background: #2700ff; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 

#Red { 
background: #ff0000; 
margin: 100 auto; 
padding: 20px; 
width: 100px; 
height: 100px; 
} 
</style> 

<script> 
$(document).ready(function() { 
console.log("ready!"); 
$("#Blue").click(function() { 
$('#Blue').css('background-color', 'yellow'); 
alert("Color Changed"); 
}); 
$("#Red").click(function() { 
$('#Red').css('background-color', 'green'); 
alert("Color Changed"); 
}); 
}); 

</script> 


</head> 
<body> 

    <div id="Blue" class="yellow"></div> 
    <div id="Red" class="Green"></div> 
</body> 
</html>

來源

2015-08-22 10:40:31

我不知道如何做OnClick事件來改變方塊的顏色

回答

相關問題