我有一个非常奇怪的问题,我一直在使用一些HTML。我有两个div,每个div彼此独立。虽然它们都使用相同的CSS,但每个div都有自己的数据。我尝试为每个div创建一个“显示更多”按钮,单击按钮展开div,然后将按钮文本更改为“显示更少”。
但是,我有一个问题,即单独页面中的每个div都能正常工作,但当两个div都在我想要的同一个HTML页面中时,将鼠标悬停在按钮上会产生意想不到的副作用。而不是每个按钮在悬停时单独改变颜色(当您将鼠标悬停在第一个按钮上时,第一个按钮变为灰色,而第二个按钮变为栗色时),将鼠标悬停在第一个按钮上会影响第二个按钮的颜色。将鼠标悬停在第二个按钮上也会影响第二个按钮的颜色
This is a jsfiddle of the issue
这是代码:
$(document).ready(function() {
$("#period1").ready(function() {
showall = $("#period1 .showallbutton");
classgrade = $("#period1 .head tr .grade b");
footbar = $("#period1 .foot");
headbar = $("#period1 .head");
gtbar = $("#period1 .gradestopbar");
elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
percentcolumn = $("#period1 .grades tr td:nth-child(5)");
eccolumn = $("#period1 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
elem = $(this)
eccheckmark = elem.text();
if (eccheckmark === "✔") {
elem.parent().parent().css("color", "#008FFF")
}
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
$("#period2").ready(function() {
showall = $("#period2 .showallbutton");
classgrade = $("#period2 .head tr .grade b");
footbar = $("#period2 .foot");
headbar = $("#period2 .head");
gtbar = $("#period2 .gradestopbar");
elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
percentcolumn = $("#period2 .grades tr td:nth-child(5)");
eccolumn = $("#period2 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
$(this).parent().parent().css("color", "#008FFF")
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
});
body {
font-family: "Poppins", sans-serif;
margin: 0 auto;
padding: 15px;
}
.maincontainer {
padding-bottom: 15px;
}
.grades {
border-collapse: collapse;
width: 100%;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.grades td, .grades th {
border: 1px solid #ddd;
padding: 8px;
}
.grades tr:nth-child(even) {
background-color: #f2f2f2;
}
.grades tr:nth-child(2n+3) {
background-color: #ffffff;
color: black;
}
.grades tr:not(:nth-last-child(-n+5)) {
display: none;
}
.grades tr:first-child {
display: table-row;
}
.grades tr:not(.gradestopbar):hover {
background-color: #ddd;
}
.grades th {
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.gradestopbar {
border-top: 0.5px solid black;
color: white;
}
.gradestopbar th {
border: 1px solid black;
}
.datedue {
width: 13%;
}
.assigned {
width: 13%;
}
.assignment {
width: 32%;
}
.scorefraction {
width: 13%;
}
.scorepercent {
width: 13%;
}
.extracreditcheckbox {
width: 8%;
}
.notgradedcheckbox {
width: 8%;
}
.head {
border-collapse: separate;
width: 100%;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 0.5px solid black;
}
.head th {
padding-top: 12px;
padding-bottom: 12px;
color: white;
}
.foot {
font-size: 27px;
border-collapse: separate;
width: 100%;
text-align: center;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border: 2px solid black;
}
.showallbutton {
height: 40px;
width: 60%;
border: none;
background-color: white;
font-family: "Poppins", sans-serif;
font-size: 20px;
cursor: pointer;
background-color: transparent;
}
.showallbutton:focus {
outline: 0;
}
.grade {
font-size: 27px;
width: 10%;
text-align: center;
}
.course {
font-size: 24px;
width: 45%;
text-align: center;
}
.teacher {
font-size: 24px;
padding-right: 50px;
width: 45%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 1: <b>Adv Mathemagic II</b>
</th>
<th class="grade">
<b>B-</b>
</th>
<th class="teacher">
<b>Johnson, John</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/20/2018
</td>
<td>
01/20/2018
</td>
<td>
Mathemagic Practical Exam
</td>
<td>
<sup>87</sup>⁄<sub>100</sub>
</td>
<td>
87%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
Participation
</td>
<td>
<sup>15</sup>⁄<sub>30</sub>
</td>
<td>
50%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Extra Credit Assignment
</td>
<td>
<sup>5</sup>⁄<sub>5</sub>
</td>
<td>
100%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Graphing
</td>
<td>
<sup>1</sup>⁄<sub>1</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 1
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 2
</td>
<td>
<sup>2</sup>⁄<sub>3</sub>
</td>
<td>
66.6%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 3
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 4
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 5
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 6
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>
<div id="period2" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 2: <b>Honors PE 5</b>
</th>
<th class="grade">
<b>F</b>
</th>
<th class="teacher">
<b>Daveson, Dave</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/01/2018
</td>
<td>
01/01/2018
</td>
<td>
Volleyball Bouncing Test
</td>
<td>
<sup>12</sup>⁄<sub>20</sub>
</td>
<td>
60%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
January Participation
</td>
<td>
<sup>30</sup>⁄<sub>30</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Basketball into Trashcan Test
</td>
<td>
<sup>18</sup>⁄<sub>20</sub>
</td>
<td>
90%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Track and Field Sprinting Test
</td>
<td>
<sup>1</sup>⁄<sub>20</sub>
</td>
<td>
5%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
February Participation
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Swimming Test
</td>
<td>
<sup>15</sup>⁄<sub>20</sub>
</td>
<td>
75%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
GSW Extra Credit
</td>
<td>
<sup>4</sup>⁄<sub>5</sub>
</td>
<td>
80%
</td>
<td>
<center>
✔
</center>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>
您可以看到,当您将光标移到第一个按钮上时,它会更改第二个按钮的颜色而不会影响第一个按钮。基本上,第一个“显示更多”按钮仅用作控制第二个div的按钮。它对它应该工作的div没有任何作用。再一次,两个div在它们自己的HTML文件中时都能正常工作,但在放在一起时会失败。
提前致谢!
注意:html中的所有信息都是假的,并且已被替换以保护隐私。但我不相信这是任何问题的原因。
答案 0 :(得分:0)
绝对要查看很多代码,但我看到了你的问题。您正在引用基于showAll
类的两个按钮。由于两者具有相同的类,因此为每个按钮调用悬停事件。
您需要为每个按钮指定一个topButton
和bottomButton
的ID。
从那里,您可以使用以下方式单独直接访问每个按钮:
document.getElementById("topButton")
使用.style
更改每个按钮的CSS。
答案 1 :(得分:0)
问题是所有变量如showall
,classgrade
等都是全局变量。因此,hover
事件处理程序会附加到正确的按钮,但是当触发悬停事件时,footbar
变量引用footbar
内的#period2
并且效果得到应用在底部按钮上。
您需要做的就是在函数中声明局部变量,如下所示。
$(document).ready(function() {
$("#period1").ready(function() {
var showall = $("#period1 .showallbutton");
var classgrade = $("#period1 .head tr .grade b");
var footbar = $("#period1 .foot");
var headbar = $("#period1 .head");
var gtbar = $("#period1 .gradestopbar");
var elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
var percentcolumn = $("#period1 .grades tr td:nth-child(5)");
var eccolumn = $("#period1 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
elem = $(this)
eccheckmark = elem.text();
if (eccheckmark === "✔") {
elem.parent().parent().css("color", "#008FFF")
}
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
$("#period2").ready(function() {
var showall = $("#period2 .showallbutton");
var classgrade = $("#period2 .head tr .grade b");
var footbar = $("#period2 .foot");
var headbar = $("#period2 .head");
var gtbar = $("#period2 .gradestopbar");
var elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
var percentcolumn = $("#period2 .grades tr td:nth-child(5)");
var eccolumn = $("#period2 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
$(this).parent().parent().css("color", "#008FFF")
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
});
&#13;
body {
font-family: "Poppins", sans-serif;
margin: 0 auto;
padding: 15px;
}
.maincontainer {
padding-bottom: 15px;
}
.grades {
border-collapse: collapse;
width: 100%;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.grades td, .grades th {
border: 1px solid #ddd;
padding: 8px;
}
.grades tr:nth-child(even) {
background-color: #f2f2f2;
}
.grades tr:nth-child(2n+3) {
background-color: #ffffff;
color: black;
}
.grades tr:not(:nth-last-child(-n+5)) {
display: none;
}
.grades tr:first-child {
display: table-row;
}
.grades tr:not(.gradestopbar):hover {
background-color: #ddd;
}
.grades th {
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.gradestopbar {
border-top: 0.5px solid black;
color: white;
}
.gradestopbar th {
border: 1px solid black;
}
.datedue {
width: 13%;
}
.assigned {
width: 13%;
}
.assignment {
width: 32%;
}
.scorefraction {
width: 13%;
}
.scorepercent {
width: 13%;
}
.extracreditcheckbox {
width: 8%;
}
.notgradedcheckbox {
width: 8%;
}
.head {
border-collapse: separate;
width: 100%;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 0.5px solid black;
}
.head th {
padding-top: 12px;
padding-bottom: 12px;
color: white;
}
.foot {
font-size: 27px;
border-collapse: separate;
width: 100%;
text-align: center;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border: 2px solid black;
}
.showallbutton {
height: 40px;
width: 60%;
border: none;
background-color: white;
font-family: "Poppins", sans-serif;
font-size: 20px;
cursor: pointer;
background-color: transparent;
}
.showallbutton:focus {
outline: 0;
}
.grade {
font-size: 27px;
width: 10%;
text-align: center;
}
.course {
font-size: 24px;
width: 45%;
text-align: center;
}
.teacher {
font-size: 24px;
padding-right: 50px;
width: 45%;
text-align: center;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 1: <b>Adv Mathemagic II</b>
</th>
<th class="grade">
<b>B-</b>
</th>
<th class="teacher">
<b>Johnson, John</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/20/2018
</td>
<td>
01/20/2018
</td>
<td>
Mathemagic Practical Exam
</td>
<td>
<sup>87</sup>⁄<sub>100</sub>
</td>
<td>
87%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
Participation
</td>
<td>
<sup>15</sup>⁄<sub>30</sub>
</td>
<td>
50%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Extra Credit Assignment
</td>
<td>
<sup>5</sup>⁄<sub>5</sub>
</td>
<td>
100%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Graphing
</td>
<td>
<sup>1</sup>⁄<sub>1</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 1
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 2
</td>
<td>
<sup>2</sup>⁄<sub>3</sub>
</td>
<td>
66.6%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 3
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 4
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 5
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 6
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>
<div id="period2" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 2: <b>Honors PE 5</b>
</th>
<th class="grade">
<b>F</b>
</th>
<th class="teacher">
<b>Daveson, Dave</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/01/2018
</td>
<td>
01/01/2018
</td>
<td>
Volleyball Bouncing Test
</td>
<td>
<sup>12</sup>⁄<sub>20</sub>
</td>
<td>
60%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
January Participation
</td>
<td>
<sup>30</sup>⁄<sub>30</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Basketball into Trashcan Test
</td>
<td>
<sup>18</sup>⁄<sub>20</sub>
</td>
<td>
90%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Track and Field Sprinting Test
</td>
<td>
<sup>1</sup>⁄<sub>20</sub>
</td>
<td>
5%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
February Participation
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Swimming Test
</td>
<td>
<sup>15</sup>⁄<sub>20</sub>
</td>
<td>
75%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
GSW Extra Credit
</td>
<td>
<sup>4</sup>⁄<sub>5</sub>
</td>
<td>
80%
</td>
<td>
<center>
✔
</center>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>
&#13;
答案 2 :(得分:0)
您需要在ready
函数中包含不同的变量。你声明变量的方式使它们成为全局范围的,那就是你的问题。我做了很少的更改,您需要完成此操作,使用const
,let
或var
关键字
$(document).ready(function() {
$("#period1").ready(function() {
const showall = $("#period1 .showallbutton");
const classgrade = $("#period1 .head tr .grade b");
const footbar = $("#period1 .foot");
const headbar = $("#period1 .head");
const gtbar = $("#period1 .gradestopbar");
const elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
const percentcolumn = $("#period1 .grades tr td:nth-child(5)");
const eccolumn = $("#period1 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
elem = $(this)
eccheckmark = elem.text();
if (eccheckmark === "✔") {
elem.parent().parent().css("color", "#008FFF")
}
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
$("#period2").ready(function() {
showall = $("#period2 .showallbutton");
classgrade = $("#period2 .head tr .grade b");
footbar = $("#period2 .foot");
headbar = $("#period2 .head");
gtbar = $("#period2 .gradestopbar");
elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
percentcolumn = $("#period2 .grades tr td:nth-child(5)");
eccolumn = $("#period2 .grades tr td:nth-child(6) center");
percentcolumn.each(function() {
elem = $(this)
percent = $(this).text();
percentfloat = parseFloat(percent)
if (percentfloat <= 69.9) {
elem.parent().css("color", "#DD0000");
} else if (percentfloat >= 70 && percentfloat <= 84.9) {
elem.parent().css("color", "#000000");
} else if (percentfloat >= 85) {
elem.parent().css("color", "#00bb00")
}
});
eccolumn.each(function() {
$(this).parent().parent().css("color", "#008FFF")
});
if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
headbar.css("background-color", "#1EC53A");
gtbar.css("background-color", "#1EC53A");
footbar.css("background-color", "#1A9AFF")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#008FFF99");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#1A9AFF")
});
} else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
headbar.css("background-color", "#DD0000");
gtbar.css("background-color", "#DD0000");
footbar.css("background-color", "#DD0000");
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#AA0000");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "#DD0000");
});
} else {
headbar.css("background-color", "black");
gtbar.css("background-color", "black");
footbar.css("background-color", "black");
showall.css("color", "white")
showall.hover(function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "gray");
}, function() {
footbar.css({
"transition": "all 0.5s",
"-webkit-transition": "all 0.5s",
"-o-transition": "all 0.5s",
"-moz-transition": "all 0.5s"
});
footbar.css("background-color", "black");
});
}
showall.click(function() {
if (elementshidden.css("display") === "table-row") {
elementshidden.hide();
showall.text("Show More")
} else if (elementshidden.css("display") === "none") {
elementshidden.show();
showall.text("Show Less");
}
});
});
});
body {
font-family: "Poppins", sans-serif;
margin: 0 auto;
padding: 15px;
}
.maincontainer {
padding-bottom: 15px;
}
.grades {
border-collapse: collapse;
width: 100%;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.grades td, .grades th {
border: 1px solid #ddd;
padding: 8px;
}
.grades tr:nth-child(even) {
background-color: #f2f2f2;
}
.grades tr:nth-child(2n+3) {
background-color: #ffffff;
color: black;
}
.grades tr:not(:nth-last-child(-n+5)) {
display: none;
}
.grades tr:first-child {
display: table-row;
}
.grades tr:not(.gradestopbar):hover {
background-color: #ddd;
}
.grades th {
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.gradestopbar {
border-top: 0.5px solid black;
color: white;
}
.gradestopbar th {
border: 1px solid black;
}
.datedue {
width: 13%;
}
.assigned {
width: 13%;
}
.assignment {
width: 32%;
}
.scorefraction {
width: 13%;
}
.scorepercent {
width: 13%;
}
.extracreditcheckbox {
width: 8%;
}
.notgradedcheckbox {
width: 8%;
}
.head {
border-collapse: separate;
width: 100%;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 0.5px solid black;
}
.head th {
padding-top: 12px;
padding-bottom: 12px;
color: white;
}
.foot {
font-size: 27px;
border-collapse: separate;
width: 100%;
text-align: center;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border: 2px solid black;
}
.showallbutton {
height: 40px;
width: 60%;
border: none;
background-color: white;
font-family: "Poppins", sans-serif;
font-size: 20px;
cursor: pointer;
background-color: transparent;
}
.showallbutton:focus {
outline: 0;
}
.grade {
font-size: 27px;
width: 10%;
text-align: center;
}
.course {
font-size: 24px;
width: 45%;
text-align: center;
}
.teacher {
font-size: 24px;
padding-right: 50px;
width: 45%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 1: <b>Adv Mathemagic II</b>
</th>
<th class="grade">
<b>B-</b>
</th>
<th class="teacher">
<b>Johnson, John</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/20/2018
</td>
<td>
01/20/2018
</td>
<td>
Mathemagic Practical Exam
</td>
<td>
<sup>87</sup>⁄<sub>100</sub>
</td>
<td>
87%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
Participation
</td>
<td>
<sup>15</sup>⁄<sub>30</sub>
</td>
<td>
50%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Extra Credit Assignment
</td>
<td>
<sup>5</sup>⁄<sub>5</sub>
</td>
<td>
100%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Graphing
</td>
<td>
<sup>1</sup>⁄<sub>1</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 1
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 2
</td>
<td>
<sup>2</sup>⁄<sub>3</sub>
</td>
<td>
66.6%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 3
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 4
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 5
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Extra Assignment 6
</td>
<td>
<sup>3</sup>⁄<sub>3</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>
<div id="period2" class="maincontainer">
<table class="head" width=1500px>
<tr>
<th class="course">
Period 2: <b>Honors PE 5</b>
</th>
<th class="grade">
<b>F</b>
</th>
<th class="teacher">
<b>Daveson, Dave</b>
</th>
</tr>
</table>
<table class="grades">
<tr class="gradestopbar">
<th class="datedue">
<label>
Date Due
</label>
</th>
<th class="assigned">
<label>
Assigned
</label>
</th>
<th class="assignment">
<label>
Assignment
</label>
</th>
<th class="scorefraction">
<label>
Score
</label>
</th>
<th class="scorepercent">
<label>
Percent
</label>
</th>
<th class="extracreditcheckbox">
<label>
Extra
<br>
Credit
</label>
</th>
<th class="notgradedcheckbox">
<label>
Not
<br>
Graded
</label>
</th>
</tr>
<tr>
<td>
01/01/2018
</td>
<td>
01/01/2018
</td>
<td>
Volleyball Bouncing Test
</td>
<td>
<sup>12</sup>⁄<sub>20</sub>
</td>
<td>
60%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/21/2018
</td>
<td>
01/21/2018
</td>
<td>
January Participation
</td>
<td>
<sup>30</sup>⁄<sub>30</sub>
</td>
<td>
100%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Basketball into Trashcan Test
</td>
<td>
<sup>18</sup>⁄<sub>20</sub>
</td>
<td>
90%
</td>
<td>
<center>✔</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/22/2018
</td>
<td>
01/22/2018
</td>
<td>
Track and Field Sprinting Test
</td>
<td>
<sup>1</sup>⁄<sub>20</sub>
</td>
<td>
5%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
February Participation
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<center>
✔
</center>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
Swimming Test
</td>
<td>
<sup>15</sup>⁄<sub>20</sub>
</td>
<td>
75%
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
01/23/2018
</td>
<td>
01/23/2018
</td>
<td>
GSW Extra Credit
</td>
<td>
<sup>4</sup>⁄<sub>5</sub>
</td>
<td>
80%
</td>
<td>
<center>
✔
</center>
</td>
<td>
</td>
</tr>
</table>
<table class="foot">
<tr class="showall">
<td>
<button class="showallbutton">Show More</button>
</td>
</tr>
</table>
</div>