Javascript jquery 四个div,点击变换不同颜色,如果颜色全部变执行某个函数。
四个div,点击变换不同颜色,如果颜色全部变了执行某个函数。思路是怎样的呢$(".suo").each(function(i){if(i==0){$(this).clic...
四个div,点击变换不同颜色,如果颜色全部变了执行某个函数。思路是怎样的呢
$(".suo").each(function(i){
if(i==0){
$(this).click(function(){
$(this).css("background","yellow");
$(this).data("data","change");
});
}
if(i==1){
$(this).click(function(){
$(this).css("background","green");
$(this).data("data","change");
});
}
if(i==2){
$(this).click(function(){
$(this).css("background","#0066cc");
$(this).data("data","change");
});
}
if(i==3){
$(this).click(function(){
$(this).css("background","#666");
$(this).data("data","change");
});
}
}); 展开
$(".suo").each(function(i){
if(i==0){
$(this).click(function(){
$(this).css("background","yellow");
$(this).data("data","change");
});
}
if(i==1){
$(this).click(function(){
$(this).css("background","green");
$(this).data("data","change");
});
}
if(i==2){
$(this).click(function(){
$(this).css("background","#0066cc");
$(this).data("data","change");
});
}
if(i==3){
$(this).click(function(){
$(this).css("background","#666");
$(this).data("data","change");
});
}
}); 展开
展开全部
<script>
$(document).ready(function () {
$("#red").on("click", function () {
$(this).css("background-color", "red");
$("#body").trigger("changeColorEvent" );
});
$("#green").on("click", function () {
$(this).css("background-color", "green");
$("#body").trigger("changeColorEvent");
});
$("#blue").on("click", function () {
$(this).css("background-color", "blue");
$("#body").trigger("changeColorEvent");
});
$("#yellow").on("click", function () {
$(this).css("background-color", "yellow");
$("#body").trigger("changeColorEvent");
});
$("#body").on("changeColorEvent", function (event) {
var number = parseInt($("#changeNumber").val()) + 1;
if (number == 4) {
$("div").removeAttr("style");
$("#changeNumber").val(0);
} else {
$("#changeNumber").val(number);
}
});
});
</script>
<div id="body">
<div id="red">1</div>
<div id="green">2</div>
<div id="blue">3</div>
<div id="yellow">4</div>
</div>
<input type="hidden" id="changeNumber" value="0" />
-------------------------------------
$("div").removeAttr("style"); 这段可以改成你想要的代码
$(document).ready(function () {
$("#red").on("click", function () {
$(this).css("background-color", "red");
$("#body").trigger("changeColorEvent" );
});
$("#green").on("click", function () {
$(this).css("background-color", "green");
$("#body").trigger("changeColorEvent");
});
$("#blue").on("click", function () {
$(this).css("background-color", "blue");
$("#body").trigger("changeColorEvent");
});
$("#yellow").on("click", function () {
$(this).css("background-color", "yellow");
$("#body").trigger("changeColorEvent");
});
$("#body").on("changeColorEvent", function (event) {
var number = parseInt($("#changeNumber").val()) + 1;
if (number == 4) {
$("div").removeAttr("style");
$("#changeNumber").val(0);
} else {
$("#changeNumber").val(number);
}
});
});
</script>
<div id="body">
<div id="red">1</div>
<div id="green">2</div>
<div id="blue">3</div>
<div id="yellow">4</div>
</div>
<input type="hidden" id="changeNumber" value="0" />
-------------------------------------
$("div").removeAttr("style"); 这段可以改成你想要的代码
追问
不行啊,一个div点四次也可以消失。。。。
追答
var flag = ["red", "green", "blue", "yellow"];
$(document).ready(function () {
$("#red").on("click", function () {
$(this).css("background-color", "red");
$("#body").trigger("changeColorEvent", $(this).attr('id'));
});
$("#body").on("changeColorEvent", function (event,id) {
if (flag != undefined && flag != "" && jQuery.inArray(id, flag)>=0) {
flag.splice(jQuery.inArray(id, flag), 1);
}
if (flag == "") {
$("div").removeAttr("style");
}
});
});
2015-05-05
展开全部
给四个div加一个onclick事件:比如有div1,div2,div3,div4 。 onclick="aaa('div1')",aaa方法里面的参数就是每个层的id属性。
function方法如下:
function aaa(div){
if(div=="div1")
$("#"+div).attr("background","blue");
else if(div=="div2")
$("#"+div).attr("background","red");
else if(div=="div3")
...............
}
function方法如下:
function aaa(div){
if(div=="div1")
$("#"+div).attr("background","blue");
else if(div=="div2")
$("#"+div).attr("background","red");
else if(div=="div3")
...............
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
给4个div绑定 点击事件,然后用if ....else判断
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
加判断,if,,
追问
能详细点么
追答
在四个变色方法加入boolean,,,变了就true....最后判断,四个全是ture就执行方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询