Khi tôi cố gắng tạo các bảng HTML, tôi tự hỏi làm thế nào tôi có thể greyout
các tế bào không bị xử lý.
Khi tôi nhấp vào ô ____ 10, kết quả mong muốn của tôi giống như bên dưới.
Tôi đã thử như mã bên dưới. Nếu có phương pháp tinh vi hơn cho greyout
xin vui lòng cho tôi biết.
Cảm ơn
var $ = jQuery;
$['td'].on['click', function[e] {
e.preventDefault[];
$['table'].toggleClass['greyout'];
}]
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
1
2
3
4
5
6
7
8
9
Penny Liu
13.3k5 Huy hiệu vàng71 Huy hiệu bạc90 Huy hiệu Đồng5 gold badges71 silver badges90 bronze badges
Đã hỏi ngày 27 tháng 3 năm 2020 lúc 10:20Mar 27, 2020 at 10:20
0
Bạn cần áp dụng lớp cho tất cả các ô ngoại trừ mẫu được nhấp, vì vậy hãy sử dụng phương pháp
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
2. Cũng lưu ý rằng để kích hoạt các nhấp chuột tiếp theo, bạn cần xóa lớp đó khỏi bất kỳ phần tử td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
3 nào trước khi thêm nó vào tập tiếp theo.Ngoài ra, lưu ý rằng
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
4 là dự phòng trên td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
3 Nhấp vào Handler vì không có hành động mặc định để ngăn chặn. Ngoài ra, nếu bạn muốn bí danh td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
/* Real browsers */
}
6 sử dụng đối số trong tài liệu.Với tất cả những gì đã nói, hãy thử điều này:
jQuery[$ => {
let $td = $['td'].on['click', function[] {
$td.removeClass['greyout'].not[this].addClass['greyout'];
}]
}];
td {
background-color: aqua;
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.greyout {
opacity: 0.2;
}
1
2
3
4
5
6
7
8
9
Đã trả lời ngày 27 tháng 3 năm 2020 lúc 10:23Mar 27, 2020 at 10:23
Rory McCrossanrory McCrossanRory McCrossan
327K37 Huy hiệu vàng300 Huy hiệu bạc328 Huy hiệu Đồng37 gold badges300 silver badges328 bronze badges
1
Tôi sẽ đi theo logic sau:
$mainTable = $['table'];
$mainTable.on['click', 'td', function[]{
if[ this.classList.contains['selected'] ]{
$[this].removeClass['selected']
} else{
$mainTable.find['.selected'].removeClass['selected'];
$[this].addClass['selected']
}
$mainTable.toggleClass['withSelectedOption', $mainTable.find['.selected'].length !== 0];
}];
table td{
background: aqua;
padding: 10px;
}
table.withSelectedOption td{
background: grey;
}
table.withSelectedOption td.selected{
background: aqua;
}
1 2 3
4 5 6
7 8 9
Đã trả lời ngày 27 tháng 3 năm 2020 lúc 10:24Mar 27, 2020 at 10:24
MartijnmartijnMartijn
15,5K4 Huy hiệu vàng36 Huy hiệu bạc67 Huy hiệu Đồng4 gold badges36 silver badges67 bronze badges
0