0

そのため、関数が機能しない理由がよくわかりません。

したがって、.addClass を使用してクラスを追加し、ウィンドウの幅と高さに合わせてサイズを変更する div があります。div を「閉じて」元のサイズに戻そうとすると、クリック機能が機能しません。以下に私のコードを含めました。どんな助けでも大歓迎です。これはおそらく非常に単純な解決策であることを知っています。何らかの理由で、「フリップ」のクラスを削除してサイズ変更する要素が見つからないようです。

jQuery

 var windowHeight = $(window).height();
 var windowWidth = $(window).width();
 $('.click').on("click", function () {
   $(this).addClass('flip').height(windowHeight).width(windowWidth);
 });
 // for the window resize
 $('#CloseThis').on("click", function () {
   //alert($(this).parent().attr('class'));
   $('body .click').removeClass('flip').height(200).width(200);
 });

HTML

<div class="click panel">
  <div class="front">
    <h2>Click or tap this circle!</h2>
  </div>
  <div class="back">
    <h2>Tap Again!</h2>
    <div id="CloseThis">Close this</div>
  </div>
</div>
4

2 に答える 2

1

このコードを試してください

$('.click').on("click", function () {
     $(this).addClass('flip').height(windowHeight).width(windowWidth);
});

$('#CloseThis').on("click", function (e) {
     $('.click').removeClass('flip').height(200).width(200);
     //  $(this).closest('.click') Multiple containers
     e.stopPropagation();
});

divをクリックしたときにイベントが発生しない stopPropagationように追加しました。.clickCloseThis

また、$('body .click')セレクターを.closest()

フィドルをチェック

于 2012-11-21T18:03:03.303 に答える
0

イベントはdomを通過するため、＃CloseThisをクリックすると関数は起動しますが、イベントは上に移動し続け、.click関数にもヒットします。これが起こらないようにするために、イベントを親要素に渡さないようにブラウザに指示できます。Event引数には次の関数が含まれています。

$('.click').on("click", function () {
   $(this).addClass('flip').height(windowHeight).width(windowWidth);
});

$('.CloseThis').on("click", function (e) {
    e.stopPropagation()
    $('body .click').removeClass('flip').height(200).width(200);
});
于 2012-11-21T18:03:14.227 に答える