简体   繁体   English

jQuery不会在div标签上附加来自JS函数对象的属性

[英]JQuery not appending div tag with attributes from a JS function object

I'm trying to print out a block onto the browser window using JQuery. 我正在尝试使用JQuery在浏览器窗口上打印出一个块。 I made the block attributes into a JS object class via function. 我通过函数将块属性制成了JS对象类。 In this code I am using the "use strict"; 在这段代码中,我使用的是"use strict"; method. 方法。

The HTML(5): HTML(5):

<!DOCTYPE html>
<html><TITLE>Logo Experiment</TITLE>

<head>
<!--adding JQuery library-->
<!--this is a DESKTOP JQuery, so this will not work much on the modern androids-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--setting charset to utf-8 unicode in case symbols are needed-->
<meta charset="utf-8">
</head>

<style>
body {
display: block;
}
.bx { /* the box... */
background-image: url("metal.png");
background-size: cover;
background-color: #333333; /* in case the image fails to load */
border-width: 1.5px;
border-radius: 6px;
border-style: solid;
border-color: #222222;
box-shadow: 2px 2px 2px #111111;
}
</style>

<body>

<script>
//the script below
</script>

</body>

</html>

The JS/JQuery: JS / JQuery:

"use strict";

function Box(width, height, style) {//box object
width = this.width;
height = this.height;
style = this.style;
};

var lbx = new Box(256, 256, "bx"); //"lbx" is "logo box"

$(document).ready(function(){//appending a div to the <body> tag directly
$("<div class='" + lbx.style + "' style='width:" + lbx.width + "px;height:" + lbx.height + "px;'>").appendTo("body");
});

Whenever I try to append the block with JQuery using the JS object attributes, I end up with this output: <div class="undefined" style="width:undefinedpx;height:undefinedpx;"></div> 每当我尝试使用JS对象属性使用JQuery附加块时,都会得到以下输出: <div class="undefined" style="width:undefinedpx;height:undefinedpx;"></div>

Any help is much appreciated. 任何帮助深表感谢。

Sincerely, CA1K. 真诚的,CA1K。

You got it backwards here. 你在这里倒退了。 It should be this.parameter = paramter : 应该是this.parameter = paramter

function Box(width, height, style) {//box object
width = this.width;
height = this.height;
style = this.style;
};

Like this: 像这样:

function Box(width, height, style) {//box object
    this.width = width;
    this.height = height;
    this.style = style;
    };

The first way does nothing other than setting the call arguments to undefined (since none of the properties there are defined). 第一种方法除了将调用参数设置为undefined之外没有做其他事情(因为其中没有定义任何属性)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM