3

首先让我说我对这一切都很陌生，但我正在努力学习。话虽如此，我一直在绞尽脑汁想弄清楚如何使用按钮 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>
4

6 回答 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>​
于 2012-08-25T00:25:46.800 回答
1

.toggleClass()应该做。

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

在这里演示

于 2012-08-25T00:51:31.940 回答
0

您可以使用 jquery 的 addClass("someClass") 和 removeClass("someclass")。你可以使用这样的东西：

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

希望这可以帮助！

于 2012-08-25T00:26:01.183 回答
0

需要注意的几件事：

  • 您传入的第一个函数.click()缺少关闭}。这将导致 JS 失败。
  • 在您的 JSfiddle 中，您没有选择 jQuery 作为库，因此您的 jQuery 将无法工作。
  • 如果您尝试为整个事物设置动画，请查看 .animate() 或.slideDown() jQuery 方法。

坚持下去，你就快到了！

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

希望能帮助到你。

于 2012-08-25T00:26:01.870 回答
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. 语法高亮（再次，有助于查看此类问题）
于 2012-08-25T00:33:07.530 回答
0

尽管已经选择了答案，但我只是想提出一个很好的说明和相当异想天开的方式来学习 Jquery http://www.codecademy.com/tracks/jquery。

希望这有助于并祝您学习 Jquery 好运！

于 2012-08-25T22:37:49.247 回答