gpt4 book ai didi

javascript - 使用 JavaScript 添加/删除单元格类

转载 作者:行者123 更新时间:2023-11-28 09:47:53 24 4
gpt4 key购买 nike

几个小时前我发布了一个类似的问题,但我已经取得了一些突破(在我看来),我觉得我现在可以更好地解释了。

首先,重要的是要说我所有的图像,我试图编辑其类别的图像,都在单元格中。就像,行内的单元格是在 HTML 表格中。

我有一个名为 .disableMenu 的类,它应该只是隐藏图片。这是那个类(class) -

.disableMenu {
visibility: hidden;
}

它很简单,而且很有魅力。所以基本上,我想要一个按钮,当它被按下时,它会从元素中删除该类(在本例中,它是表格中的单个单元格)。

这是一个单元格示例,我正试图让它在上面工作 -

<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">


<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>

现在,这是我试图触发此类更改的 JS 按钮 -

<button onclick="changeColor('disableMenu');">GO</button>

我真的很抱歉半双张贴这个和我普遍缺乏知识,但我正在努力学习(并从中获得乐趣)。

这是完整的代码,如果有人想看一下 -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Complete the puzzle!</title>
<style>
.disableMenu {
visibility: hidden;
}
.merge {
position:absolute;
left: 496px;
top: 5px;
}
.merge0 {
position:absolute;
left:300px;
top:4px;
}
.merge1 {
position:absolute;
top: 218px;
left: 530px;

}
.merge2 {
position:absolute;
top: 218px;
left: 688px;
}
.row1 {
position:absolute;
left: 301px;
top: 208px;
}
.row2 {
position:absolute;
top: 476px;
left: 301px;
margin:0;
}
.row3 {
position:absolute;
top: 495px;
left: 716px;
margin:0;
}
.row4 {
position:absolute;
top: 691px;
left: 300px;
margin:0;
}
</style>
<body style="

">

<div>
<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr >
<td id="one" >
<img src="1.png" class="merge0">
<script>
src="js/bootstrap.js"
</script>
<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.style.class = disableMenu;
}
</script>
</td>
<td>
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="4.png" class="row1">
</td>
<td id="gone">
<img src="2.png" class="merge1">
</td>
<td>
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td>
<img src="8.png" class="row2">
</td>
<td>
<img src="5.png" class="row3">
</td>
<td>
<img src="3.png" class="row4">
</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

感谢您的关注,如有任何帮助,我们将不胜感激。

最佳答案

elem.style.class = disableMenu;

这是个大问题。没有称为“类”的样式属性。你想要:

elem.className = "disableMenu";

elem.className = "";

禁用它。

您还调用了错误的函数:

<button onclick="changeColor('disableMenu');">GO</button>

应该是

<button onclick="changeClass('disableMenu');">GO</button>

希望这对您有所帮助!

===================

根据您在下方的评论,我正在修复您的代码:

<script type="text/javascript">
function changeClass("disableMenu") {
var elem = document.getElementById("one");
elem.className = "disableMenu";
//I put this line in there so you could UNDO your changes.
//Calling this immediately after the previous line will just undo what you did.
//Remove it an you should be good (the line below)
elem.className = "";

}
</script>

关于javascript - 使用 JavaScript 添加/删除单元格类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25192572/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com