Question

我有以下代码可以正常打开弹出窗口

  $(".moreMessages").click(function(){
      showPopup();
    });
    $(".popup-background").click(function(){
      hidePopup();
    });
    function showPopup(){
      $(".js-popup").fadeIn("slow", function() {
        $(this).addClass("active");
      });
      $("body").addClass('u-noscroll');
    }
    function hidePopup(){
      $(".js-popup").fadeOut("fast", function() {
        $(this).removeClass("active");
      });
      $("body").removeClass('u-noscroll');
    }

现在我有3个元素

<div class="moreMessages moreMessages--channels"><span>+5 more...</span></div>
  <div class="moreMessages moreMessages--direct"><span>+5 more...</span></div>
  <div class="moreMessages moreMessages--groups"><span>+5 more...</span></div>

我愿意做的是点击一下，点击我的弹出窗口显示不同的内容。

所以例如，如果你点击第一个就需要发生这个

 $(".moreMessages--channels").addClass('active');

关闭时也需要删除

 $(".moreMessages--channels").removeClass('active');

那么如何点击这个课程并使用它呢？

Answer 1

您可以使用this轻松获得课程。在函数内部，this将是触发click事件的对象，因此了解该类将如此简单：

$(this).attr("class");

添加/删除“活动”类就足够了，甚至不用担心对象的原始类：

$(this).addClass("active");
$(this).removeClass("active");

Answer 2

这样的东西对你有用吗？

$(".moreMessages").click(function(){
    showPopup();
    $(this).addClass("active");
    $('#content').append($(this).html());
});


$('#close').click(function(){
    hidePopup();
});

$(".popup-background").click(function(){
    hidePopup();
});

function showPopup(){
    $(".js-popup").fadeIn("slow", function() {
        $(this).addClass("active");
    });
    $("body").addClass('u-noscroll');
}
function hidePopup(){
    $(".js-popup").fadeOut("fast", function() {
        $(this).removeClass("active");
    });
    $("body").removeClass('u-noscroll');
    $(".moreMessages").removeClass("active");
    $('#content').html("");
}

这是一个小提琴：

https://jsfiddle.net/h2hcpcee/1/

Answer 3

您可以通过以下方式确定被点击的元素是否具有特定的类：

$('.a').click(function() {

  var classes = $(this).attr('class').split(/\s+/);
  
  $.each(classes, function(index, item) {
    if (item === 'b-a') {
      
      // open a popup?
      // OR, populate a single popup element with new text...
      
      alert("b-a text!")
    }
  });

});

div {
  height: 100px;
  width: 100px;
  border: dashed 2px teal;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a b-a"></div>

弹出一个可能会更容易，并根据找到的类（例如if(thisClass === 'moreMessages--channels) { // do something; }）不同地填充文本（例如{{1}}）

不同的弹出窗口取决于div点击了什么

3 个答案: