Fatal编程技术网
  • javascript/
  • Javascript 切换每个<；部门>；不同颜色的标签

Javascript 切换每个<；部门>；不同颜色的标签

javascript jquery css html

Javascript 切换每个<；部门>；不同颜色的标签,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我需要将单击的的颜色从红色切换到绿色&从绿色切换到红色。我在我的页面中使用jquery。请建议我最好的代码，以满足要求 我的代码如下： <htmL> <head> <script src="jquery-1.10.2.js"> window.onload = initPage; function initPage() { } function tileclick() {

我需要将单击的
的颜色从红色切换到绿色&从绿色切换到红色。我在我的页面中使用jquery。请建议我最好的代码，以满足要求

我的代码如下：

<htmL>

<head>

    <script src="jquery-1.10.2.js">
        window.onload = initPage;

        function initPage() {

        }


        function tileclick() {

        }
    </script>
    <style>

        div.table{
            display: table;
        }
        div.row{
             display: table-row;
            border-style:solid;
            border-color: black;
            border-width:15px;
            padding-top:35px;
            padding-bottom:35px;
            padding-right:50px;
            padding-left:50px;
            margin-top:25px;
            margin-bottom:25px;
            margin-right:50px;
            margin-left:50px;
        }


        div.cell{
            display: table-cell;
            border-style: solid;
            border-width:15px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 30px;
            padding-bottom: 30px;
            font-weight:5000;
            font-size:200%;
            background: #00FF00;


        }

    </style>
</head>
<body>
    <div id="table" class="table">

        <div id="r1" class="row">
            <div id="sys55" class="cell">55
            </div>
            <div id="sys56" class="cell">56
            </div>
            <div id="sys57" class="cell">57
            </div>
            <div id="sys58" class="cell">58
            </div>
            <div id="sys59" class="cell">59
            </div>
            <div id="sys60" class="cell">60
            </div>
            <div id="sys61" class="cell">61
            </div>
            <div id="sys62" class="cell">62
            </div>
            <div id="sys63" class="cell">63
            </div>
            <div id="sys64" class="cell">64
            </div>
            <div id="sys65" class="cell">65
            </div>
        </div>

        <div id="r2" class="row">
            <div id="sys54" class="cell">54
            </div>
            <div id="sys53" class="cell">53
            </div>
            <div id="sys52" class="cell">52
            </div>
            <div id="sys51" class="cell">51
            </div>
            <div id="sys50" class="cell">50
            </div>
            <div id="sys49" class="cell">49
            </div>
            <div id="sys48" class="cell">48
            </div>
            <div id="sys47" class="cell">47
            </div>
            <div id="sys46" class="cell">46
            </div>
            <div id="sys45" class="cell">45
            </div>
            <div id="sys44" class="cell">44
            </div>
        </div>

        <div id="r3" class="row">
            <div id="sys33" class="cell">33
            </div>
            <div id="sys34" class="cell">34
            </div>
            <div id="sys35" class="cell">35
            </div>
            <div id="sys36" class="cell">36
            </div>
            <div id="sys37" class="cell">37
            </div>
            <div id="sys38" class="cell">38
            </div>
            <div id="sys39" class="cell">39
            </div>
            <div id="sys40" class="cell">40
            </div>
            <div id="sys41" class="cell">41
            </div>
            <div id="sys42" class="cell">42
            </div>
            <div id="sys43" class="cell">43
            </div>
        </div>

        <div id="r4" class="row">
            <div id="sys32" class="cell">32
            </div>
            <div id="sys31" class="cell">31
            </div>
            <div id="sys30" class="cell">30
            </div>
            <div id="sys29" class="cell">29
            </div>
            <div id="sys28" class="cell">28
            </div>
            <div id="sys27" class="cell">27
            </div>
            <div id="sys26" class="cell">26
            </div>
            <div id="sys25" class="cell">25
            </div>
            <div id="sys24" class="cell">24
            </div>
            <div id="sys23" class="cell">23
            </div>
            <div id="sys22" class="cell">22
            </div>
        </div>

        <div id="r5" class="row">
            <div id="sys11" class="cell">11
            </div>
            <div id="sys12" class="cell">12
            </div>
            <div id="sys13" class="cell">13
            </div>
            <div id="sys14" class="cell">14
            </div>
            <div id="sys15" class="cell">15
            </div>
            <div id="sys16" class="cell">16
            </div>
            <div id="sys17" class="cell">17
            </div>
            <div id="sys18" class="cell">18
            </div>
            <div id="sys19" class="cell">19
            </div>
            <div id="sys20" class="cell">20
            </div>
            <div id="sys21" class="cell">21
            </div>
        </div>

        <div id="r6" class="row">
            <div id="sys10" class="cell">10
            </div>
            <div id="sys09" class="cell">09
            </div>
            <div id="sys08" class="cell">08
            </div>
            <div id="sys07" class="cell">07
            </div>
            <div id="sys06" class="cell">06
            </div>
            <div id="sys05" class="cell">05
            </div>
            <div id="sys04" class="cell">04
            </div>
            <div id="sys03" class="cell">03
            </div>
            <div id="sys02" class="cell">02
            </div>
            <div id="sys01" class="cell">01
            </div>
        </div>
    </div>
</body>
</html>


window.onload=initPage；
函数initPage（）{
}
函数tileclick（）{
}
分区表{
显示：表格；
}
分区行{
显示：表格行；
边框样式：实心；
边框颜色：黑色；
边框宽度：15px；
填充顶部：35px；
垫底：35px；
右边填充：50px；
左侧填充：50px；
边缘顶部：25px；
边缘底部：25px；
右边距：50px；
左边距：50像素；
}
分区单元{
显示：表格单元格；
边框样式：实心；
边框宽度：15px；
左侧填充：30px；
右侧填充：30px；
填充顶部：30px；
填充底部：30px；
字号：5000；
字体大小：200%；
背景：#00FF00；
}
55
56
57
58
59
60
61
62
63
64
65
54
53
52
51
50
49
48
47
46
45
44
33
34
35
36
37
38
39
40
41
42
43
32
31
30
29
28
27
26
25
24
23
22
11
12
13
14
15
16
17
18
19
20
21
10
09
08
07
06
05
04
03
02
01
我的初始页面应该显示为绿色，如下所示

单击每个块时，应将绿色切换为红色，反之亦然

请帮助我实现此要求。

您可以使用jQuery
toggleClass
方法（）

为红细胞添加一个类，如：

.red_cell {
  background-color: red;
}
然后是：

$('.cell').click(function() {
  $(this).toggleClass('red_cell');
});
您可以使用匹配id以
sys
开头的所有div，然后使用切换类

代码：

演示：

使用：

$(".cell").click(function(){
       var clr = $( this ).css("background-color").toString(); 
       var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
       $(this).css({
        "background":""+clr+""
        });

});
无需更改
css
标记

。希望对你有帮助。干杯

在jquery中使用
toggleClass（）

    <style>
.red{
    background : red;
}
</style>

    $(function() { 
         $(".cell").on("click" , function(e) {                    
              $(this).toggleClass("cell red");    
         });    
    });


瑞德先生{
背景：红色；
}
$（函数（）{
$（“.cell”）。单击（“click”，函数（e）{
$（此）.toggleClass（“红细胞”）；
});    
});
只需在CSS中添加一个类。

询问代码的问题必须表明对所解决问题的理解程度最低。包括尝试过的解决方案、它们不起作用的原因以及预期结果。另请参阅：堆栈溢出问题检查表。请在JSFIDLE上执行此操作。我知道我必须使用onclick初始化每个块，然后使用函数分配切换事件。我知道如何使用Javascript。但我希望Jquery中有一个现成的函数。请帮我一把
我需要切换颜色
；-）@尼克更新了我的答案。看一看 
    <style>
.red{
    background : red;
}
</style>

    $(function() { 
         $(".cell").on("click" , function(e) {                    
              $(this).toggleClass("cell red");    
         });    
    });

 $(".cell").click(function(){
     if($(this).hasClass('red')) {
         $(this).removeClass('red');
     }else{
         $(this).addClass('red');
     }
});