此对象的目的是在单击 div 时显示弹出窗口。在弹出窗口中,我想显示单击的 div 的 css 属性。我的问题是如何将 current.target.id 事件放入$("#container").css(this.css);
替换 #container 的这一行,以便我为单击的每个元素检索不同的值
提前致谢
$(function () {
function popup(){
var self = this;
this.identifier;
this.popupStatus = 0;
this.css = ["width", "height", "color", "background-color"];
$("#container > *").on('click', ':not(#popup)', function (e)
{
if(event.target.id!=='backgroundPopup')
{
e.stopPropagation()
self.centerPopup();
self.loadPopup();
self.cssAttr();
}
});
$("#backgroundPopup").click(function()
{
console.log('backgroundPopup');
self.disablePopup();
});
$(document).keypress(function(e)
{
if(e.keyCode==27 && popupStatus==1)
{
self.disablePopup();
}
});
this.cssAttr = function (e){
var html = ["Adjust the settings:"];
//problem
var styleProps = $("#container").css(this.css);
console.log(styleProps);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
}
this.loadPopup = function (){
if(this.popupStatus==0)
{
console.log('loadPopup');
$("#backgroundPopup").css(
{
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
this.popupStatus = 1;
}
}
this.disablePopup = function (){
if(this.popupStatus==1)
{
console.log('disablePopup');
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
this.popupStatus = 0;
}
}
this.centerPopup = function (){
console.log('centerPopup');
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css(
{
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css(
{
"height": windowHeight
});
}
}
var popup = new popup();
});