Question

所以我有一个按钮，无论何时点击，都会附加用户在输入字段下方输入的内容。我想这样做，当点击一个空字段时没有任何附加（基本上该功能不会运行）。

这是我的代码：

var ingrCount = 0

$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
var ingredientSpace = $("<p>");
ingredientSpace.attr("id", "ingredient-" + ingrCount);
ingredientSpace.append(" " + ingredientInput);

var ingrClose = $("<button>");

ingrClose.attr("data-ingr", ingrCount);
ingrClose.addClass("deleteBox");
ingrClose.append("✖︎");

// Append the button to the to do item
ingredientSpace = ingredientSpace.prepend(ingrClose);

// Add the button and ingredient to the div
$("#listOfIngr").append(ingredientSpace);

// Clear the textbox when done
$("#ingredients").val("");

// Add to the ingredient list
ingrCount++;

if (ingredientInput === "") {

}
});

所以我想创建一个if语句，说明当输入为空时，该函数不会运行。我想我可能需要将其移出点击功能。对于if语句，我添加了一个disabled属性，然后在输入框包含某些内容时将其删除。但是这会使按钮变成另一种颜色而不是我想要的功能。我可以测试的任何想法都会有所帮助。如果您需要更多信息，请询问。

Answer 1

如果您正在测试ingredientInput是否为空，您是否可以从click事件中返回？

$("#addIngrButton").on('click', function() {
  var ingredientInput = $("#ingredients").val().trim();
  if(ingredientInput === '') { return; }
  // rest of code

Answer 2

只需使用：

$("#addIngrButton").on('click', function() {
    var ingredientInput = $("#ingredients").val().trim();
    if (ingredientInput.length == 0) {
        return false;
    }
    // ..... your code

使按钮不运行具有空输入字段的功能

2 个答案: