如果/否則有條件的第二次沒有運行我調用函數

當我第一次運行該函數時，任何一種情況都會起作用。但是當我第二次運行該功能時，「可愛」的新值不會改變背景圖像。如果/否則有條件的第二次沒有運行我調用函數

$("#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

來源

2015-10-21 epm

你的代碼工作正常。但是請注意，你正在用空格清除這個值，所以當你再次輸入框時，你可能會輸入「」小貓「或」小狗「，所以它不符合你的任何一個條件。 –

它確實有效。 –

你的代碼工作正常*如果用戶退出你放入文本框*的空間。放棄應該是你的佔位符不會再出現。因此，請將該值設置爲空字符串（如johnnyRose所示）而不是單個空格，否則修剪「可愛」值以刪除多餘的空格（無論如何，這可能不是一個壞主意）。或者更好的是，如果您在一組* defined *值（如'kittens'和'puppies'）之間進行選擇，請使用選擇控件，而不是依賴用戶輸入*正是您期望的*。例如，如果我輸入'Kittens'，你的代碼不起作用。 –

線$("#cute").val(" ");把一個空間在文本框中。你想要的是一個空字符串：$("#cute").val("");

用空字符串替換它似乎給你所需的輸出。

來源

2015-10-21 14:51:12 johnnyRose

-1

問題

您需要使用傳遞給事件處理程序作爲一個參數事件對象e，否則你button作爲一個提交按鈕和頁面得到刷新。

SOLUTION

使用下面的代碼來代替：

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示範。

來源

2015-10-21 14:52:28 innerseal

你的代碼實際上是有效的，但唯一的問題是你需要使用$("#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); 

    } 
}

來源

2015-10-21 14:55:44

但是我輸入'PUPPIES'（因爲我對小狗感到非常興奮），它不起作用！可能最好使用不區分大小寫的比較。 –

哈哈...我要更新嗎？ @MattBurland？ –

如果/否則有條件的第二次沒有運行我調用函數

回答

相關問題