Question

当我第一次运行该功能时，任何一个条件都会起作用。但是，当我第二次运行该功能时，＆＃34;可爱的新值＃34;不会改变背景图像。

$("#sbmt-button").click(newImage);

function newImage(){
    event.preventDefault();
    var cute = $("#cute").val();
    $("#cute").val(" ");

   if (cute == "kittens") {
      $("body").attr("class", "kittens");
        console.log(cute);
    } else if (cute == "puppies"){
       $("body").attr("class", "puppies");
      console.log(cute);

    } 
}

http://codepen.io/ElaineM/pen/jbYbwj

Answer 1

您的代码确实有效，但唯一需要使用的是$("#cute").val("");而不是$("#cute").val(" ");，这会占用一个空格并且它与值不匹配。

此外，您可以尝试通过修剪空格来进行比较：

function newImage(){
    event.preventDefault();
    var cute = $("#cute").val().trim();
    $("#cute").val(" ");

   if (cute == "kittens") {
      $("body").attr("class", "kittens");
        console.log(cute);
    } else if (cute == "puppies"){
       $("body").attr("class", "puppies");
      console.log(cute);

    } 
}

Answer 2

行$("#cute").val(" ");在文本框中放置一个空格。你想要的是一个空字符串：$("#cute").val("");

用空字符串替换它似乎可以为您提供所需的输出。

Answer 3

<强>问题

您需要将传递给事件处理程序的事件对象e用作参数，否则您的button将充当提交按钮并刷新页面。

<强>解

请改用以下代码：

function newImage(e){
    e.preventDefault();

    var cute = $("#cute").val();
    console.log(cute);        

    if (cute === "kittens") {
       $("body").attr("class", "kittens");
    } else if (cute === "puppies"){
       $("body").attr("class", "puppies");
    } 

    // Reset input
    $("#cute").val("");
}

示例

请参阅updated example进行演示。

如果/ Else条件没有第二次运行我调用该函数

3 个答案: