3

私はこれらすべてに不慣れですが、学ぼうとしていると言うことから始めましょう。そうは言っても、ボタンIDを使用してdivクラスを追加/削除する方法を理解するために頭を悩ませてきました。これらのテキストボックスを約200個作成できるので、どんな助けでも大歓迎です。添付されているのは、サンプルhtml(論文テーマのワードプレスで使用するため)と私が使用している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

.toggleClass()すべきです。

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

デモはこちら

于 2012-08-25T00:51:31.940 に答える
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 に答える
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 に答える