Question

我的网络应用可能会不时显示消息。一些消息是信息：

<div class="message">Here is some info.</div>

并且有些消息是错误：

<div class="error message">jQuery is not your friend.</div>

我希望用户能够从屏幕上清除信息性消息，但错误需要保留，我想我可以通过在每条消息上添加点击关闭功能来实现。

此类有效：）

$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    theBox = this;
    $(theBox).css('cursor','pointer')
             .attr('title','Click to close')
             .click( function(){ $(theBox).fadeOut( 1000 ); })
  });
});

排序。如果屏幕上只有一条信息消息，它可以正常工作，但如果有两条消息，则只有第二条消息被隐藏，无论我点击哪一个。

点击后，你能帮我告诉每个<div>关闭吗？

Answer 1

循环期间

theBox发生了变化。在内部回调中使用$(this)。

$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    $(this).css('cursor','pointer')
           .attr('title','Click to close')
           .click( function(){ $(this).fadeOut( 1000 ); })
  });
});

Answer 2

在点击事件中使用此：

$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    theBox = this;
    $(theBox).css('cursor','pointer')
             .attr('title','Click to close')
             .click( function(){ $(this).fadeOut( 1000 ); })
  });
});

theBox 将在函数RUNS（文档就绪）中引用该对象。如你所知，click事件将引用theBox的最后一个值。您需要click事件中引用的当前对象。在click事件的范围内，它是 this 。

Answer 3

我删除了Box变量（并且只使用了$（this））并且它工作正常。

$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    $(this).css('cursor','pointer')
             .attr('title','Click to close')
             .click( function(){ $(this).fadeOut( 1000 ); })
  });
});

http://jsfiddle.net/KhCqU/

Answer 4

我认为改变你的代码是这样的：

$(document).ready(function() {
    $('.message:not(.error)').each(function() {
        theBox = this;
        $(theBox).css('cursor','pointer')
            .attr('title','Click to close')
            .click( function(){ $(this).fadeOut( 1000 ); })
    });
});

应该修复它。

Answer 5

这应该这样做

$(document).ready(function() {
  $('.message:not(.error)').each(function() {
    theBox = this;
    $(theBox).css('cursor','pointer')
             .attr('title','Click to close')
             .click( function(){ $('.message').fadeOut( 1000 ); })
  });
});

Answer 6

由于您希望在单击邮件时关闭所有邮件，因此使用.each()方法不利于优化，并会降低代码速度。请尝试使用event.target或this来确定要关闭的元素：

var theBox = $('.message:not(.error)');
theBox.css('cursor','pointer')
      .attr('title','Click to close')
      .click(function(e){$(e.target).fadeOut( 1000 );});

See example →

Answer 7

您将theBox定义为全局变量。如果您使用var theBox来声明局部变量，它将起作用。

如何为每个<div>？</div>添加“单击关闭”功能

7 个答案: