1. 首頁
  2. 問答
  3. 如何覆蓋一個按鈕的CSS類，並刪除它與另一個按鈕？

如何覆蓋一個按鈕的CSS類，並刪除它與另一個按鈕？

2017-10-07 12 views
1

我試圖在某人按下按鈕時將閃爍效果CSS類應用於整個表格。但是，某些行不受blink類的影響。如何覆蓋一個按鈕的CSS類，並刪除它與另一個按鈕？

$("#alarm").click(function() { 
 
    $("#tableContainer").addClass("blink"); 
 
}); 
 

 
$("#stopAlarm").click(function() { 
 
    $("#tableContainer").removeClass("blink"); 
 
});
.heading { 
 
    text-align: center; 
 
    background-color: #C1C1C1; 
 
} 
 

 
.monitor { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    text-align: right; 
 
    background-color: powderblue; 
 
} 
 

 
div { 
 
    align-content: center; 
 
} 
 

 
th, 
 
td { 
 
    min-width: 80px; 
 
    width: auto; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #F1F1F1; 
 
} 
 

 
.blink { 
 
    animation: blink 200ms infinite alternate; 
 
} 
 

 

 
/*blink effect color switcher*/ 
 

 
@keyframes blink { 
 
    from { 
 
    background-color: white; 
 
    } 
 
    to { 
 
    background-color: red; 
 
    } 
 
} 
 

 
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table id="tableContainer"> 
 
    <tr> 
 
     <th class="heading">dsgegaw</th> 
 
     <th class="heading">fvsegwaf</th> 
 
     <th class="heading">peaagwwa</th> 
 
     <th class="heading">p76uihx</th> 
 
     <th class="heading">gdjhrdu3</th> 
 
     <th class="heading">sg45y7ids</th> 
 
     <th class="heading">30jqnfj</th> 
 
     <th class="heading">][2proq2=0-i</th> 
 
     <th class="heading">-20=riojwkfl</th> 
 
     <th class="heading">t-09tujkjgf</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="column"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">System Time</td> 
 
     <td> 
 
     <div id="p1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p11"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp1"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Status</td> 
 
     <td> 
 
     <div id="p2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p21"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp2"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Logged Time</td> 
 
     <td> 
 
     <div id="p3"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p31"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c3"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <button id="alarm" type="button">Start Alarm</button> 
 
    <button id="stopAlarm" type="button">Stop Alarm</button> 
 
</body>

來源

2017-10-07 nanj

+0

完整表閃爍。那麼問題是什麼？ –

+0

@AlivetoDie我正在嘗試使狀態行，標題和第一列閃爍的背景。 – nanj

+0

'.row'的CSS優先於容器的CSS。 – Barmar

回答

1

所有這一切都有自己的風格background-color不會繼承從容器中的風格元素。你需要把這個類放在這些元素上。

$("#alarm").click(function() { 
 
    $("#tableContainer td, #tableContainer th").addClass("blink"); 
 
}); 
 

 
$("#stopAlarm").click(function() { 
 
    $("#tableContainer td, #tableContainer th").removeClass("blink"); 
 
});
.heading { 
 
    text-align: center; 
 
    background-color: #C1C1C1; 
 
} 
 

 
.monitor { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    text-align: right; 
 
    background-color: powderblue; 
 
} 
 

 
div { 
 
    align-content: center; 
 
} 
 

 
th, 
 
td { 
 
    min-width: 80px; 
 
    width: auto; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #F1F1F1; 
 
} 
 

 
.blink { 
 
    animation: blink 200ms infinite alternate; 
 
} 
 

 

 
/*blink effect color switcher*/ 
 

 
@keyframes blink { 
 
    from { 
 
    background-color: white; 
 
    } 
 
    to { 
 
    background-color: red; 
 
    } 
 
} 
 

 
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table id="tableContainer"> 
 
    <tr> 
 
     <th class="heading">dsgegaw</th> 
 
     <th class="heading">fvsegwaf</th> 
 
     <th class="heading">peaagwwa</th> 
 
     <th class="heading">p76uihx</th> 
 
     <th class="heading">gdjhrdu3</th> 
 
     <th class="heading">sg45y7ids</th> 
 
     <th class="heading">30jqnfj</th> 
 
     <th class="heading">][2proq2=0-i</th> 
 
     <th class="heading">-20=riojwkfl</th> 
 
     <th class="heading">t-09tujkjgf</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="column"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">System Time</td> 
 
     <td> 
 
     <div id="p1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p11"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp1"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Status</td> 
 
     <td> 
 
     <div id="p2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p21"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp2"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Logged Time</td> 
 
     <td> 
 
     <div id="p3"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p31"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c3"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <button id="alarm" type="button">Start Alarm</button> 
 
    <button id="stopAlarm" type="button">Stop Alarm</button> 
 
</body>

來源

2017-10-07 06:14:53 Barmar

0

入住這

$("#alarm").click(function() { 
 
    $("#tableContainer").addClass("blink"); 
 
    $("#status").addClass("blink"); 
 
}); 
 

 
$("#stopAlarm").click(function() { 
 
    $("#tableContainer").removeClass("blink"); 
 
    $("#status").removeClass("blink"); 
 
});
.heading { 
 
    text-align: center; 
 
    background-color: #C1C1C1; 
 
} 
 

 
.monitor { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    text-align: right; 
 
    background-color: powderblue; 
 
} 
 

 
div { 
 
    align-content: center; 
 
} 
 

 
th, 
 
td { 
 
    min-width: 80px; 
 
    width: auto; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #F1F1F1; 
 
} 
 

 
.blink { 
 
    animation: blink 200ms infinite alternate; 
 
} 
 

 

 
/*blink effect color switcher*/ 
 

 
@keyframes blink { 
 
    from { 
 
    background-color: white; 
 
    } 
 
    to { 
 
    background-color: red; 
 
    } 
 
} 
 

 
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table id="tableContainer"> 
 
    <tr> 
 
     <th class="heading">dsgegaw</th> 
 
     <th class="heading">fvsegwaf</th> 
 
     <th class="heading">peaagwwa</th> 
 
     <th class="heading">p76uihx</th> 
 
     <th class="heading">gdjhrdu3</th> 
 
     <th class="heading">sg45y7ids</th> 
 
     <th class="heading">30jqnfj</th> 
 
     <th class="heading">][2proq2=0-i</th> 
 
     <th class="heading">-20=riojwkfl</th> 
 
     <th class="heading">t-09tujkjgf</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="column"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">System Time</td> 
 
     <td> 
 
     <div id="p1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p11"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp1"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr id="status" class="status"> 
 
     <td class="row">Status</td> 
 
     <td> 
 
     <div id="p2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p21"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="ca2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="m2"></div> 
 
     </td> 
 
     <td> 
 
     <div id="mp2"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Logged Time</td> 
 
     <td> 
 
     <div id="p3"></div> 
 
     </td> 
 
     <td> 
 
     <div id="p31"></div> 
 
     </td> 
 
     <td> 
 
     <div id="c3"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <button id="alarm" type="button">Start Alarm</button> 
 
    <button id="stopAlarm" type="button">Stop Alarm</button> 
 
</body>

來源

2017-10-07 06:15:18

0

答案是讓我的jQuery的addClass和刪除類更具體：

$("#alarm").click(function(){ 
    $("#tableContainer th").addClass("blink"); 
    $("#tableContainer td").addClass("blink"); 
}); 

$("#stopAlarm").click(function(){ 
    $("#tableContainer th").removeClass("blink"); 
    $("#tableContainer td").removeClass("blink"); 
});

來源

2017-10-07 06:15:28 nanj

相關問題

 相關問題