jquery-ui - 如何将 if 条件放入 jquery 的附加函数中

Question

我被困在一个 jquery 函数中，我想要的只是使用 jquery 的 append 函数附加一些 div，但问题是我想在这个函数中放置一些 if 条件，

这是我的无条件工作代码

$( "#some-div-container" ).append( 
                                  "<div>name 1" +
                                      "<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>" +
                                      "<div>Available</div>" +
                                  "</div>"
                                );

我正在使用具有一些 json 响应的 jquery 的 ajax 函数，所以我只想要那个，假设 if(response == 1) 然后执行其中的代码，我正在尝试使用条件，

 $( "#some-div-container" ).append( 
                                  "<div>name 1"
                                  if(response == 1) {    
                                     +"<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>"
                                  }
                                      + "<div>Available</div>" +
                                  "</div>"
                                );

可能吗？任何帮助将不胜感激，当我把这个条件“我的其他一些javascript函数未定义”时发生错误，无条件完美运行

Answer 1

使用变量预先构建您的字符串：

var elements = "<div>";
if (someCondition) {
  elements += "<a href='#'>some link</a>";
}
elements += "</div>";

或者，一个更具体的例子：

var elements = "<div>name 1";
if(response == 1) {    
  elements += 
    "<a href='#'>" +
      "<div id='add'>Add</div>" +
    "</a>";
}
elements += "<div>Available</div>";
elements += "</div>";

然后附加结果字符串：

$("#some-div-container").append(elements);

Answer 2

您可以通过以下方式实现：

$('#some-div-container').append(
    '<div>name 1' + 
    (response == 1 ? '<a href="#"><div id="add">Add</div></a>' : '') +
    '<div>Available</div></div>'
);

演示

但我认为做这样的事情会更整洁

var div = $('<div/>', { text: 'name 1' });
if(response == 1) {
    div.append($('<a/>', { href: '#' }).append($('<div/>', { id: 'add', text: 'Add' })));
}
$('<div/>', { text: 'Available' }).appendTo(div);
div.appendTo('#some-div-container');

演示

Answer 3

尝试这个 ：

$( "#some-div-container" ).append( 
    "<div>name 1"
    + (
        response == 1 ?    
        "<a href=\"#\">" +
        "<div id=\"add\">Add</div>" +
        "</a>"
        :
        ""
    )
    + "<div>Available</div>" +
        "</div>"
);

Answer 4

根据 的值创建不同的字符串response，并使用条件字符串执行一次 append() 调用。

Answer 5

var html;
html += "<div>name 1";
if(response == 1) {    
  html += "<a href=\"#\">";
// other code.....
}                                

 $( "#some-div-container" ).append( html );