Question

我正在使用jQuery来让我的用户快速浏览他们的个人资料。他们的个人资料上有一个收件箱，我让他们使用jQuery删除过去的邮件。问题是每次加载页面时都会有不同数量的电子邮件。如何告诉jQuery管理mail1和mail2以及mail 3等功能，但前提是它们存在。

下面你将看到我为每个运行的jquery，但是需要有一个循环。

$(document).ready(function() {
  $("#del1").click(function() {
    $(".mail1").fadeOut();
  });
});

$(document).ready(function() {
  $("#del2").click(function() {
    $(".mail2").fadeOut();
  });
});

Answer 1

为每个删除按钮指定一个公共类和一个data-id属性。您可以将click事件绑定到每个del按钮，然后删除相应的邮件元素。

$(".del").click(function() {
    var id = $(this).attr("data-id");
    $(".mail" + id).fadeOut();
});

Answer 2

您应该使您的元素和代码更通用。例如，将所有删除链接指定为同一个类，让我们说deleteButton并且所有邮件都指向同一个类，例如mail。

然后使用他们的距离来处理它们。也许是这样的：

$(".deleteButton").click(function(){
   $(this).parent().find(".mail").fadeOut();
});

这假设按钮和邮件共享一个共同的父，但即使他们没有，也可以做类似的事情。

Answer 3

我会尝试这样的事情：

$("[id^='del']").each(function(){
 $(this).click(function(){
  $('.mail'+(/\d+/).exec($(this).attr("id"))).fadeOut();
 });
});

Answer 4

将点击事件绑定到所有del 元件。
点击它们后，获取ID 并用它来获取名称要隐藏的相关课程。
使用该类名来执行此操作 fadeOut()

Answer 5

我认为这样的事情应该有效：

$(document).ready(function() {
  $("[id^=del]").each(function(){
    var e=$(this),m = e.attr('id').match(/^del(\d+)$/);
    if( m ){
      e.click(function(){$('#.mail'+m[1]).fadeOut();});
    }
  });
});

Answer 6

$(document).ready(function() {
    if($("#del1").length){
      $("#del1").click(function() {
        $(".mail1").fadeOut();
      });
    }
    if($("#del2").length){
      $("#del2").click(function() {
        $(".mail2").fadeOut();
      });
    }
    ....
});

Answer 7

Jquery允许你选择'startswith'你也可以使用jquery的正则表达式选择器，但我认为这会让你接近：

$(document).ready(function() {
  $('*[id^="del"]').click(function() {
    $(this).closest('[class^="mail"]').fadeOut();
  });
});

这假设class =“mail ...”在id =“del ...”的某个时刻是一个祖先

由于我们不知道你的确切HTML我喜欢最近而不是父，因为父认为del是直接在邮件中的一层。

jQuery可以运行循环吗？

7 个答案: