我正在尝试建立一个链接,打开一个弹出窗口,当用户点击链接时,该窗口包含一些内联HTML和图像。
我已经让它工作,以便每个链接打开弹出窗口,但它不会显示正确的内容 - 它不断拉动最后隐藏的div而不是点击链接的div。 / p>
;(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>
&#13;
正如你所看到的那样,它只会拉动最后一条消息流行音符&#39;格。
答案 0 :(得分:2)
您正尝试使用类选择器选择并触发元素上的事件。类选择器将为类提供类似于对象的数组。
您需要做的是找到被点击的确切元素,您在点击事件中有$(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);
答案 1 :(得分:0)
你正在呼唤所有&#34; .pop&#34; divs同时他们互相摔倒,所以你总是看到最后一个