javascript - jquery弹出窗口仅拉动最后一个弹出div

Question

我试图让一个链接打开一个弹出窗口，当用户单击该链接时，该窗口包含一些内联 HTML 和图像。

我已经让它工作了，以便每个链接都会打开弹出窗口，但它不会显示正确的内容 - 它会不断拉动最后一个隐藏的 div，而不是单击的链接的 div。

;(function($){
	function deselect(e) {
	  $('.pop').slideFadeToggle(function() {
		e.removeClass('selected');
	  });    
	}
	$(function() {
	  $('#popup,#popup2,#popup3,#popup4').on('click', function() {
		if($(this).hasClass('selected')) {
		  deselect($(this));               
		} else {
		  $(this).addClass('selected');
		  $('.pop').slideFadeToggle();
		}
		return false;
	  });
	  $('.close').on('click', function() {
		deselect($('#popup,#popup2,#popup3,#popup4'));
		return false;
	  });
	});
	
	$.prototype.slideFadeToggle = function(easing, callback) {
	  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
	};
    })(jQuery);

@media screen and (max-width:980px) {
      .hide {
    	  font-weight: bold;
    	  color: #0f2c6a;
    	  display: block !important;
    	}
      }
      .hide {
      display: none;
    }
    
    a.selected {
      background-color:#1F75CC;
      color:white;
      z-index:100;
    }
    
    .messagepop {
          box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);
      background-color:#FFFFFF;
      border:1px solid #999999;
      cursor:default;
      display:none;
      margin-top: 15px;
      text-align:left;
      min-width:500px;
      max-width: 1200px;
      min-height: 00px;
      max-height: 820px;
      z-index:99999;
      padding: 25px 25px 25px;
      margin: auto;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    
    @media screen and (max-width:480px) {
      .messagepop {
    	  min-width: 300px !important;
    	  max-width: 330px !important;
    	  min-height: 300px !important;
    	  max-height: 330px !important;
    	}
    	  		  .pop-right {
    		font-size: 16px;
    			  }
      }
      @media screen and (max-width:980px) {
    	.messagepop {
    		min-width: 600px;
    		max-width: 650px;
    		min-height: 400px;
    		max-height: 640px;
    	  }
    				  .pop-right {
    		font-size: 20px;
    			  }
    	}
    	@media screen and (max-width: 768px) {
    	  .messagepop {
    		  min-height: 500px;
    		  max-height: 550px;
    		  min-width:335px;
    		  max-width:385px;
    		}
    		  .pop-right {
    		font-size: 18px;
    			  }
    	  }
    	  
    	  .messagepop p, .messagepop.div {
    	  border-bottom: 1px solid #EFEFEF;
    	  margin: 8px 0;
    	  padding-bottom: 8px;
    	}
    	
    	#close {
    	  position: absolute;
    	  top: -10px;
    	  right: -10px;
    	  background: #000;
    	  border-radius: 40px;
    	  border: 1px solid #fff;
    	  width: 25px;
    	  height: 25px;
    	}
    	#close a {
    	  color: #fff;
    	  font-size: 15px;
    	  line-height: 20px;
    	  text-decoration: none;
    	  text-align: center;
    	  width: 25px;
    	  height: 25px;
    	  margin: 0 auto;
    	  position: absolute;
    	  top: 0;
    	  left: 0;
    	  right: 0;
    	  bottom: 0;
    	}
    	
    	.pop-left {
      float: left;
      width: 50%;
    }
    
    .pop-right {
      float: right;
      width: 50%;
          padding-left: 20px;
        font-size: 20px;
        line-height: 1.7em;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">Details</div>
    <div class="messagepop pop">
    <div id="close"><a class="close" href="/">x</a></div>
    <div class="pop-left">Left 1</div>
    <div class="pop-right">Right 1</div>
    </div>
    <a id="popup" href="#popup">View Details</a>

    <div class="hide">Details</div>
    <div class="messagepop pop">
    <div id="close"><a class="close" href="/">x</a></div>
    <div class="pop-left">Left 2</div>
    <div class="pop-right">Right 2</div>
    </div>
    <a id="popup2" href="#popup2">View Details</a>

    <div class="hide">Details</div>
    <div class="messagepop pop">
    <div id="close"><a class="close" href="/">x</a></div>
    <div class="pop-left">Left 3</div>
    <div class="pop-right">Right 3</div>
    </div>
    <a id="popup3" href="#popup3">View Details</a>

    <div class="hide">Details</div>
    <div class="messagepop pop">
    <div id="close"><a class="close" href="/">x</a></div>
    <div class="pop-left">Left 4</div>
    <div class="pop-right">Right 4</div>
    </div>
    <a id="popup4" href="#popup4">View Details</a>

如您所见，它仅拉动最后一个“messagepop pop”div。

Answer 1

您正在尝试使用类选择器在元素上选择并触发事件。类选择器将为您提供类的所有匹配元素的类似数组的对象。

你需要做的是找到被点击的确切元素，你的点击事件中有 $(this) jquery 对象，它告诉你用户点击了哪个确切的元素。

现在您必须使用这个确切的元素 $(this) 来获取其他元素。

在您的代码中进行如下更改。

  (function($){
    function deselect(e) {
         e.prev().slideFadeToggle(function() {
        e.removeClass('selected');
      }); 
    }
    $(function() {
      $('#popup,#popup2,#popup3,#popup4').on('click', function() {
        if($(this).hasClass('selected')) {
          deselect($(this));               
        } else {
          $(this).addClass('selected');
          $(this).prev().slideFadeToggle();
        }
        return false;
      });
      $('.close').on('click', function() {
    var link = $(this).parent().parent().next().attr("id");
        deselect($("#"+link));
        return false;
      });
    });

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

工作示例:http://jsfiddle.net/SRw67/3042/