logo标签列表

添加/删除Div类

jqueryhtmlcss
3
让我先说一下，我对这一切都很新，但正在努力学习。话虽如此，我一直在想如何通过按钮ID添加/删除div类。非常感谢任何帮助，因为我需要制作大约200个这样的文本框。附上示例HTML（用于WordPress与Thesis主题）和我正在使用的CSS。我还包括了一个链接到jsfiddle，以便您可以看到我试图实现的内容（但失败了）。

http://jsfiddle.net/EXPH77/rz683/

CSS：

#the_box {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 300;
  color: #oooooo;
  background-color: #ddddee;
  width: 320px;

}

.box_header {
  padding-top: .5em;
  font-weight: 600;
  color: #ffffff;
  background-color: #477ede;
  text-align: center;
  height: 25px;
  font-size:1.2em;

}

.box_text {
  text-align: left;
  padding: 1px;
  margin-bottom: 3px;
  font-size:0.84em;

}

.media {
  text-align: center;
  padding: 4px;
  margin-bottom: 3px;

}

.box_expand {
  text-align: left;
  padding: 1px;
  margin-bottom: 3px;
  font-size:0.84em;

}

p.headtext {
  color: #000000;
  font-weight: 600;
  margin-bottom: 3px;
  text-align: left;
  font-size:1.2em;

}

HTML：

<div id="the_box">
<div class="box_header"> Exercise Title </div> 
<div class="media"> 
<iframe width="300" height="195" src="http://www.youtube.com/embed/Ok97QIq2f4E" frameborder="0" allowfullscreen></iframe> 
</div> 
<div class="box_text"> 
<p class="headtext">Muscles</p> 
<ul style="list-style: none; "> 
  <li><strong>Primary:</strong>&nbsp;&nbsp;MM</li> 
  <li><strong>Secondary:</strong>&nbsp;&nbsp;MM</li>
<button id="addClass">Instructions</button>
<script type="text/javascript">
    $("#addClass").click(function () {    
      $('#the_box').addClass('box_expand');
    $("#removeClass").click(function () {
      $('#the_box').removeClass('box_expand');
    });  
</script>
</div> <div class="box_expand"> 
<p class="headtext">Preparation</p> 
<ol> 
  <li>Instructions</li> 
  <li>Go</li> <li>Right</li> 
  <li>Here</li> 
</ol> 
<p class="headtext">Movement</p> 
<ol> 
  <li>Instructions</li> 
  <li>Go</li> 
  <li>Right</li> 
  <li>Here</li> 
</ol> 
<p class="headtext">Comments/Tips</p> 
<ul> 
  <li>Instructions</li> 
  <li>Go</li> 
  <li>Here</li> 
</ul> 
</div> 
</div>
我对你在这里所说的“通过按钮ID添加/删除的div类”感到困惑。你是想在单击按钮时向一个div添加一个类吗？另外，你是否记得调用JavaScript库？ - Ian
预期的行为是什么？ - Ricardo Marimon
1
你的第一个点击处理程序中缺少 })。http://jsfiddle.net/rz683/5/ 在你的标记中没有带有 removeClass 类的元素，请发布所有必要的标记并注意 ID 必须是唯一的，如果你有很多框，应该使用类。 - Ram
你是说你想默认隐藏指令数据，当按钮被点击时切换显示/隐藏吗？ - Scott Rowley
另外，你的 jsfiddle 设置为 mootools，这可能不利于它的工作 :) - Jeff Tratner
感谢大家的帮助。预期的行为是在单击按钮时添加一个div类。我已经将其更改为div id，并且它已经实现了我想要的大部分功能。 - Travis
6个回答
1

首先，调用jQuery库到DOM，并且在需要初始化jQuery函数时始终使用document.ready()。

第二件事，你忘记了用这个来关闭第一个点击函数：)};

编辑：如果你想显示和隐藏选择器；这里是可工作的jsFiddle。

jQuery：如果你想要使用动画效果，可以使用fadeOut() fadeIn()方法。

$("#hide").click(function () {
    $('#the_box').fadeOut(300);
    //$('#the_box').hide();
});
$("#show").click(function () {
    $('#the_box').fadeIn(300);
    //$('#the_box').show();
});

HTML：

<div id="the_box"> The Box </div>
<button id="hide"> Hide </button>
<button id="show"> Show </button>​
非常感谢您的帮助。也许我需要一个不同的函数？我正在尝试隐藏/显示div class =“box_expand”。 - Travis
1
非常感谢您的帮助。我已经修改了它以适应我的CSS。最终我将要隐藏的div更改为Id而不是class，看起来效果很好。我唯一的问题是，有没有办法使其在加载时就隐藏div id="box_expand"？如果没有，我理解。我非常感谢您给我的帮助。链接 - Travis
@Travis 是的，你可以在这里看到 jsFiddle 的代码示例：http://jsfiddle.net/eWHSJ/5/。你只需要在开头添加 $('#box_expand').hide(); 即可。我很高兴能帮到你，如果有效的话，请选择接受答案 (: - Barlas Apaydin
谢谢，那个完美地解决了我的问题。我刚刚接受了你的答案。 - Travis
1
0

正如其他人所说，您需要在原始监听器函数中添加一个闭合大括号和括号。但是，我建议如果您将来尝试调试类似的问题，可以将脚本分解为最简单的示例，以便更好地理解。

http://jsfiddle.net/XrUmr/

例如，要找出您遇到的错误，您实际上只需要这个 HTML 代码：
<div id="the_box"> Something </div>
<button id="addClass"> Instructions </button>
<button id="removeClass"> Remove class </button>​

还有这段 JavaScript 代码：

 $("#addClass").click(function () {    
    $('#the_box').addClass('box_expand')
 });
 $("#removeClass").click(function () {
      $('#the_box').removeClass('box_expand');
 });

（用一些CSS来区分添加和删除的类）。

另外，你应该尝试找一个编辑器：

  1. 自动添加缩进（这样你可以更容易地判断是否漏掉了开放/关闭花括号等）
  2. 进行语法高亮显示（同样有助于解决这些问题）
谢谢，我很感激你的帮助和耐心。我是一名生理学家，正在尝试在我建立的健康和健身网站中学习所有这些知识。最终我将div类更改为div id，并使用点击功能来隐藏/显示。我认为这样会起作用，但我可能还会进一步调整，因为我希望它在隐藏状态下加载。再次感谢。 - Travis
0
你可以使用 jQuery 的 addClass("someClass") 和 removeClass("someclass")。你可以像这样使用：
$("#AddClass").click( $("#the_box").addClass("someClass") );

希望这能有所帮助！
HTML中没有获取到id为AddClass的元素。 - Barlas Apaydin
有一个带有“说明”标签的按钮，它有一个ID...无论如何，我想给你一个例子，但我错过了你已经用你的脚本做了什么，抱歉... - user1502531
0

需要注意的几点：

  • 你第一个传递给 .click() 的函数缺少闭合的 }，这会导致 JS 失败。
  • 在你的 JSfiddle 中，你没有选择 jQuery 作为库，所以你的 jQuery 将无法工作。
  • 如果你想要对整个内容进行动画处理，请查看 .animate() 或 .slideDown() jQuery 方法。

继续努力，你就快成功了！

我简化了你的标记，并在这里提供了一个简单的示例：http://jsfiddle.net/ZyHSr/

希望能对你有所帮助。

1
没错。不过我想知道脚本是否可以放在页面底部。 - jonathanbell
我们同时给出了相同的答案，唯一的区别是 .ready()。 - Barlas Apaydin
@Travis，如果它们起作用并且有一个或两个赞也不会伤害... ;) - jonathanbell
0

尽管答案已经被选择，我仍然想建议一个漂亮的插图和相当异想天开的学习Jquery的方式http://www.codecademy.com/tracks/jquery。

希望这能帮到你，祝你学习Jquery好运！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接