JQuery：添加要追加的值，但仅限于值不为空

Question

我一直在研究一种实验性的wysiwyg交互式网页设计工具 今天我决定实现具有全局风格的能力，但我有点问题......

这是我对我的应用程序的截图。正如你所看到的，有很多价值观 还有更多，但我通过追加添加全局样式。这是我目前的代码，它是如何添加的，但不是如何删除...

$(".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();

我正在尝试做的是在位置上说例如我告诉所有.head h1样式相对定位，顶部位于1em，底部位于1em。我希望它附加为。

.head h1 {
  position:relative;
  top:1em;
  bottom:1em;
}

我一直在使用以下内容来检查某个值是否为空，如果不是，我会调用该值代表的任何函数。这是一个例子......

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

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

$(".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>");

代码没有做任何事情，实际上显示了我所有隐藏的div，以及使它看起来很糟糕，无法使用的一切，更不用说使代码本身成为编辑的头疼。

我尝试将变量GlobalStylez()变成一个渲染相同内容的函数，但是我的问题是将值显示为例如top:1em;，以及其他非空值。

我为这个长期问题道歉。我问过尽可能简单彻底的问题。

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

Answer 1

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

$(".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>");