Question

首先我要说的是，我对所有这一切都是新手但是要努力学习。话虽如此，我一直在绞尽脑汁想出如何使用按钮ID添加/删除div类。任何帮助都将非常感激，因为我有大约200个这样的文本框。附件是样本html（用于带有论文主题的wordpress）和我正在使用的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>

Answer 1

第一个ol;调用jQuery libary到DOM，当你需要在jQuery上初始化一个函数时，总是使用document.ready()。

第二件事，你忘了关闭第一次点击功能：)};

修改：如果要显示和隐藏选择器; Here is working 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>

Answer 2

.toggleClass()应该这样做。

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

DEMO HERE

Answer 3

您可以使用jquery的addClass（“someClass”）和removeClass（“someclass”）。你可以使用这样的东西：

$("#AddClass").click( $("#the_box").addClass("someClass") );

希望这有帮助！

Answer 4

值得注意的事情：

您在.click()中传递的第一个函数错过了结束}。这将导致JS失败。
在你的JSfiddle中，你没有选择jQuery作为库，所以你的jQuery将无法工作。
如果您尝试动画整个事物，请查看.animate（）或.slideDown() jQuery方法。

尽管如此，你几乎就在那里！

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

希望它有所帮助。

Answer 5

正如其他人所说，您需要在原始侦听器功能中添加右括号和括号。但是，我建议，如果你将来尝试调试这样的东西，你可以将脚本分解为最简单的例子，你可以尝试解决它。

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来区分添加和删除的类）。

此外，您应该尝试找到一个编辑器：

自动添加缩进（这样您可以更轻松地判断错过开/闭括号等）
语法突出显示（再次，有助于查看这些问题）

Answer 6

即使已经选择了答案，我也想建议一个很好地说明和相当异想天开的学习Jquery http://www.codecademy.com/tracks/jquery的方法。

希望这会有所帮助＆amp;祝Jquery好运！

添加/删除Div类

6 个答案: