Question

我想用jQuery创建一个HTML对象，并从变量中设置id，但我不知道它是如何工作的。

这是代码：

countArticle=eval("Count" + x+";");
copy.css("width", "96px");
copy.find("img").css("height", "50px");
copy.append("Anzahl: <span class='count' id="countArticle" )>"+ 1
+"</span>");
copy.appendTo("#target").fadeIn();

有谁知道，这怎么可行？

Answer 1

copy.append("Anzahl: <span class='count' id='" + countArticle + "'>" + 1 + "</span>");

要连接字符串，请使用加号。

所以你想要这个字符串：

Anzahl: <span class='count' id='

然后是countArticle的值，然后是这个字符串：

'>

将字符串放在双引号中，然后得到：

"Anzahl: <span class='count' id='" +
countArticle +
"'>"

（请注意，我还删除了一个似乎不属于那里的权利。）

Answer 2

我认为你只需要在第4行使用+：

copy.append("Anzahl: <span class='count' id='" + countArticle + "' )>" + 1
        +"</span>");

Answer 3

您是否尝试过连接？

copy.append("Anzahl: <span class='count' id='" + countArticle + "' )>"+ 1
    +"</span>");

Answer 4

在使用jQuery创建元素时，我通常更喜欢define attributes via an object。

jQuery（html，attributes）

<强> HTML
  键入：htmlString
  定义单个独立HTML元素的字符串（例如class HasA { _a: any; get a(): any { return this._a; } set a(value: any) { this._a = value; } } class HasB { _b: any; get b(): any { return this._b; } set b(value: any) { this._b = value; } } class HasC { _c: any; get c(): any { return this._c; } set c(value: any) { this._c = value; } } class ClassOne implements HasA, HasB, HasC { _a: any; a: any; _b: any; b: any; _c: any; c: any; constructor(a: any, b: any, c: any) { this.a = a; this.b = b; this.c = c; } } applyMixins(ClassOne, [HasA, HasB, HasC]); function applyMixins(derivedCtor: any, baseCtors: any[]) { baseCtors.forEach(baseCtor => { Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => { derivedCtor.prototype[name] = baseCtor.prototype[name]; }); }); }或<div/>）。

<强>属性
  类型：PlainObject
  调用新创建的元素的属性，事件和方法的对象。

<div></div>

var $copy = jQuery('#copy'),
    countArticleID = 'countArticle',
    html = '<span />',
    attributes = {
      'id': countArticleID,
      'class': 'count',
      'text': 1
    },
    $count_element = jQuery(html, attributes);

$copy.append('Anzahl:', $count_element);

.count {
  padding: 0 .5em;
  margin: 0 0 0 .5em;
  border: 1px solid #AAA;
  border-radius: .25em;
}
#countArticle {
  background-color: lightblue;
}

当然，如果简洁很重要，可以缩短代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copy"></div>

var countArticleID = 'countArticle';

jQuery('#copy').append('Anzahl:', jQuery('<span/>', {
  'id': countArticleID,
  'class': 'count',
  'text': 1
}));

.count {
  padding: 0 .5em;
  margin: 0 0 0 .5em;
  border: 1px solid #AAA;
  border-radius: .25em;
}
#countArticle {
  background-color: lightblue;
}

有关详细信息，请参阅Creating a div element in jQuery。

从变量设置id

4 个答案: