JQuery：仅当值不为空时才将值添加到append

我一直在开发一个实验性的所见即所得交互式网页设计工具。
今天我决定实现具有全局样式的功能，但我有一点问题

这是我的应用程序截图。正如您所看到的，有很多值。
还有更多，但我通过append添加了全局样式。这是我的当前代码，它是如何添加的，而不是如何删除的

$(".list-of-css-selectors").append("<div class='list-of-css-selectors-container'><a href='javascript:void(0)' class='del-global-css-style'><span class='fa fa-times'></span></a> <button>"+ $(".add-css-selector-val").val() +"</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ $(".add-css-selector-val").val() +" {"+ css attr and values go here +"}\n</pre>" +"</div>");

$(".add-css-selector-val, .custom-css-sheet").val("");
$(".c-css-sheet").html("").html( $(".list-of-css-selectors").html() );
$(".c-css-sheet textarea, .c-css-sheet a, .c-css-sheet button").remove();
$(".custom-css-sheet").val( $('.c-css-sheet').html().replace(/<\/?/g,'').replace(/div class="c-css-sheet hide">/g,'').replace(/div>div class="list-of-css-selectors-container"> pre style="text-align:left; padding-top:5px; overflow:auto;">/g,'').replace(/pre>div>/g,'').replace(/ }div>div class="list-of-css-selectors-container"> pre style="text-align:left; padding-top:5px; overflow:auto;">/g,'').replace(/pre>/g,'').replace(/div>/g,'') );
$(".add-css-refer-val").val("");
FinalizePrev();

我一直在使用下面的方法来检查一个值是否为空，如果不是，我调用该值代表的任何函数。这里有一个例子

if ( $(".grab-pos-top").val() === "" ) {
  // do nothing
} else {
  alert("Function called...");
}

如果我在append函数中添加它，它看起来会像这样

$(".list-of-css-selectors").append("<div class='list-of-css-selectors-container'><a href='javascript:void(0)' class='del-global-css-style'><span class='fa fa-times'></span></a> <button>"+ $(".add-css-selector-val").val() +"</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ $(".add-css-selector-val").val() +" {"+ if ( $(".grab-pos-top").val() === "" ) { } else { top: value; +"}\n</pre>" +"</div>");

$（.css选择器列表”）.append（“+$（.addcss选择器val”）.val（）+”“+”“+”+$（.addcss选择器val”）.val（）+“{+if（$（.grab pos top”）.val（）====”）{}否则{top:value；+“}\n”+”；

代码没有做任何事情，实际上显示了我所有隐藏的div，以及所有让它看起来很糟糕、不可用的东西，更不用说让代码本身成为编辑的难题了

我尝试将一个变量

GlobalStylez（）

作为一个呈现相同内容的函数，但是我的问题是让值与其他非空值一起显示，例如在本例中

top:1em；

我为这个冗长的问题道歉。我尽可能地简单而彻底地问了我的问题

---

如果有人能帮我解决这个问题，我们将不胜感激。

您需要使用条件（也称三元）运算符：

$(".list-of-css-selectors").append("<div class='list-of-css-selectors-container'><a href='javascript:void(0)' class='del-global-css-style'><span class='fa fa-times'></span></a> <button>"+ $(".add-css-selector-val").val() +"</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ $(".add-css-selector-val").val() +" {"+ ( $(".grab-pos-top").val() === "" ? "" : "{ top:" + value + ";}\n" ) + "</pre>\n</div>");

$（.css选择器列表”）.append（“+$（.addcss选择器val”）.val（）+”“+”“+”+$（.addcss选择器val”）.val（）+“{+（$（.grab pos top”）.val（）===”？：“{top:“+value+”；}\n”）+“\n”）；

如果

是一条语句，你不能在表达式中使用它。你在Javascript控制台中没有发现语法错误吗？我想你要找的是条件运算符：

？：

谢谢。我肯定要读一些关于条件运算符/三元运算符的书。

$(".list-of-css-selectors").append("<div class='list-of-css-selectors-container'><a href='javascript:void(0)' class='del-global-css-style'><span class='fa fa-times'></span></a> <button>"+ $(".add-css-selector-val").val() +"</button>"+ "<pre style='text-align:left; padding-top:5px; overflow:auto;'>"+ $(".add-css-selector-val").val() +" {"+ ( $(".grab-pos-top").val() === "" ? "" : "{ top:" + value + ";}\n" ) + "</pre>\n</div>");