jQuery 没有正确输出 HTML

Question

我有一个非常旧的 Rails 3 项目正在维护，我需要向其添加新功能。主要是 Bootstrap 4.

的响应能力

这就是我真正想要创建的：http://jsfiddle.net/k1zbe4o9/。如您所见，它在 fiddle 中完美运行。然而这个项目使用jQuery来动态改变HTML。 jQuery 代码相当简单

if (best_price) {
  li_class = "list-group-item";
  li_class += " card-list-best";
}

我在函数中这样使用它：

var list_html = $("<li class=" + li_class + ">" + list_details_html + "</li>");

但是，当我这样做时，我得到了一件奇怪的事情，即 jQuery 没有正确地 return，所以不是将 list-group-item card-list-best 放在单个 [=16= 中] class，不知何故我得到card-list-best超出了那个范围，结果如图所示。

如果我这样做也会发生同样的事情：

if (best_price) {
  li_class = "list-group-item card-list-best";
}

感谢任何帮助。

Answer 1

您可以在构建 li 时添加 '。

"<li class='" + li_class + "'>" + list_details_html + "</li>"

如您在示例中所见，我添加了一个控制台日志，它 returns <li class=list-group-item card-list-best>test</li> 所以如果 " 或 ' 之后 class= 那么它将取 = 之后的值，直到第一个 space，所以它会 return <li class="list-group-item">test</li>

工作示例

var li_class = "";
var list_details_html = "test";
li_class = "list-group-item";
li_class += " card-list-best";
var list_html = $(
  "<li class='" + li_class + "'>" + list_details_html + "</li>"
);

console.log("<li class=" + li_class + ">" + list_details_html + "</li>")

$('ul').append(list_html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

jQuery 没有正确输出 HTML

jQuery doesn't output proper HTML

javascript

jquery

ruby-on-rails-3