0

次の問題があります。さまざまな状況で要素をマークするために、要素にクラスを追加したいと思います。

jQuery('#menu-item-41 a').addClass('newsbox-closed1');

後で、このクラスの要素がクリックされたときに面白いスタッフを作りたいと思っています。これまでのところ、正常に機能しています。

jQuery('.newsbox-closed1').click(function(){
      jQuery('#newsbox').css('display', 'block');
      jQuery(this).css('background-color', '#FF33AB').removeClass('newsbox-closed1').addClass('news-open');
 });

今まではすべてが順調です。要素はクラス「news-open」を取得し、ニュースボックスが表示されます。しかし、その後、以下は機能しなくなります。

jQuery('.news-open').click(function(){
  alert('JUCVJU');
  jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
  jQuery('#newsbox').css('display', 'none');
});

アイデア：誰かが同じリンクをもう一度クリックすると、ニュースボックスが消え、リンクに新しいクラスが追加されます。これは機能しません。クラス「new-open」は削除されず、アラートボックスは表示されず、何も表示されません。さらに、次の作業は途中で行われます。これはニュースボックスの閉じるボタンです。

jQuery('#close').click(function(){
  jQuery('#newsbox').css('display', 'none');
  jQuery('.news-open').removeClass('news-offen').addClass('newsbox-closed2')
});

IDが「newsbox」の要素は消えますが、2番目の部分は効果がありません。クラスはこの要素のままです。エラーメッセージは表示されません。何も表示されません...これを引き起こす原因を誰かが知っていますか？

最高、トビアス

4

4 に答える 4

1

実行時にクラスを追加しています。変化する

jQuery('.news-open').click(function(){

に

jQuery('.news-open').on('click',(function(){

上記はJQuery>=1.7の場合です

JQuery <1.7の場合、

jQuery('.news-open').live('click',function(){

JQueryでのライブおよびオンは、実行時に作成された要素に対しても機能します。

于 2012-08-30T17:20:18.310 に答える
1

ドキュメントのロード後にクラスを変更するため、おそらくイベントハンドラーを委任する必要があります。交換してみてください

jQuery('.news-open').click(function(){

と

jQuery(document).on('click', '.news-open', function(){

ただし、それをより具体的にすることができる場合はdocument、そうする必要があります。.news-open最適な効率を得るために、イベントを可能な限り最も近いコンテナに委任します。

http://api.jquery.com/on/

于 2012-08-30T17:17:34.520 に答える
0

君たちありがとう！！！

同様の問題に直面している他のすべての人にそれを伝えるために、私の作業コードは次のようになります。

jQuery('#menu-item-41').on('click', '.news-open', (function(){
  alert('JUCVJU');
  jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
  jQuery('#newsbox').css('display', 'none');
}));

ID「menu-item-41」は、クラス「news-open」で要素を囲むコンテナのIDです。さらに再分類された要素をもう一度クリックするとアラートボックスが表示され、ニュースボックスが消えます。

于 2012-08-31T13:52:39.277 に答える
0

非常によく似た問題：リンクをクリックすると、アニメーションを実行して非表示のdivを表示し'.hideMe'、レイアウトの残りの部分にクラスを追加して、表示されたdivのどこかをクリックすると再び非表示になるようにします。 '.hideMe'ページの読み込み時に存在しないため、jQueryで選択できません。.on()ここに示すように、委任を使用して2つのメソッドをチェーンすることで解決しました： https ：//stackoverflow.com/a/8261148

$(document.body).on('click', '#link', function() {
  $('div').addClass('.hideMe').animate(); // animation code here
  $('#newdiv').show();
}).on('click', '.hideme', function() {
  $('div').removeClass('.hideMe').animate(); // animation code here
  $('#newdiv').hide();
});

これはjQuery1.10.xです。

于 2014-01-12T13:43:10.813 に答える