多个弹出 windows 每个内容不同

Question

我最初发现了一个很好的 jQuery 弹出功能，用于我正在创建的网站。原来的 post 来自这里：Reducing duplicated code with JQuery function

基本上我想要实现的是让每个弹出框包含不同的内容（比如我的.pop1 & .pop2 div中的所有内容：p和img），这样我仍然可以给它通过 CSS 的样式。我还需要确保在其相关 link 上弹出正确的 div。

这是我正在使用的代码：

Jquery

 $.fn.slideFadeToggle = function(easing, callback) {
    return this.each(function() {
        $(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    });
};

$.fn.myPopup = function(popupText) {
    return this.each(function() {
        var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
            p         = $('<p />', {style: 'align="right"'}),
            close     = $('<a />', {href: '#', 'class': 'close', text: 'Close'});

        $(this).on('click', function(){
            $(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
            $(".pop").slideFadeToggle()
            $("#email").focus();
        });
        close.on('click', function(e) {
            $(".pop").slideFadeToggle();
            $(this).removeClass("selected");
        });
    });
};

$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));

还有HTML

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#" id="word1234">Supercalifragilisticexpialidocious</a></li>
<li><a href="#" id="wordABCD">Foo</a></li>

<div class="messagepop pop">
  <img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
  <p>
  Lorem Ipsum
  </p>  
</div>

<div class="messagepop pop2">
  <img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
  <p>
  Hello World
  </p>  
</div>

这是 jsfiddle 上的代码：https://jsfiddle.net/6rcr1d2v/

我是 jQuery 的初学者，所以如果有人可以帮助我修复并尽可能简单地解释如何完成此操作，我将不胜感激。谢谢！

编辑：确实有人帮助弹出框。现在我需要帮助让弹出框不会同时出现。他们需要与相关的 link (class).

分开弹出

Answer 1

你的问题是你有一些语法错误。您没有用引号将 pop 和 pop2 选择器括起来。

查找 jQuery 元素的正确方法是

$(".className")

注意 class 选择器周围的引号。

$.fn.slideFadeToggle = function(easing, callback) {
    return this.each(function() {
        $(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    });
};

$.fn.myPopup = function(popupText) {
    return this.each(function() {
        var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
            p         = $('<p />', {style: 'align="right"'}),
            close     = $('<a />', {href: '#', 'class': 'close', text: 'Close'});
        
        $(this).on('click', function(){
            $(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
            $(popupText).slideFadeToggle()
            $("#email").focus();
        });
        close.on('click', function(e) {
            $(popupText).slideFadeToggle();
            $(this).removeClass("selected");
        });
    });
};

$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));

a.selected {
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#" id="word1234">Supercalifragilisticexpialidocious</a></li>
<li><a href="#" id="wordABCD">Foo</a></li>

<div class="messagepop pop">
  <img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
  <p>
  Lorem Ipsum
  </p>  
</div>

<div class="messagepop pop2">
  <img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
  <p>
  Hello World
  </p>  
</div>

多个弹出 windows 每个内容不同

Multiple pop up windows with different content in each one

html

javascript

jquery

popup