Question

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

基本上我想要实现的是让每个弹出框包含不同的内容（例如我的.pop1＆amp; .pop2 divs：p和img中的所有内容），这样我就可以继续给它样式了通过CSS。我还需要确保在相关链接上弹出正确的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的初学者，所以如果有人能帮我解决并尽可能简单地解释如何做到这一点我会非常感激。谢谢！

编辑：有人帮助您弹出框。现在我需要帮助让弹出框不能同时出现。他们需要单独弹出相关链接（类）。

Answer 1

您的问题是您遇到了一些语法错误。您没有在引号中包含pop和pop2选择器。

找到jQuery元素的正确方法是

$(".className")

注意类选择器周围的引用。

＆＃13;

$.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"));

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

多个弹出窗口，每个窗口中包含不同的内容

1 个答案: