0

所以我不太明白为什么我的功能不起作用。

所以我有一个 div，它使用 .addClass 添加一个类，然后调整为窗口的宽度和高度。当我尝试“关闭” 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();
});

添加了stopPropagation以便.click在单击 div 时不会触发事件 CloseThis。

也将$('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 回答