用單選按鈕切換div的外觀

我以前有過類似的問題，並且能夠根據任何一種情況對它進行排序。我想要的是「是」單選按鈕來切換div的外觀與其他問題。在論壇中查看其他解決方案後，我認爲我的HTML是穩定的，但我的jquery很不穩固。我不確定我做錯了什麼。用單選按鈕切換div的外觀

$(document).ready(function(){ 
$("input[name$='yes']").click(function(){ 
    var test = $(this).val(); 

    $("div.desc").show(); 
}); 
});

這裏是我的HTML小提琴以及jQuery的： http://jsfiddle.net/g63m9yyg/

此外，如果有任何良好的jQuery/JS教程或資源，請參考我。 HTML/CSS對我來說很容易，但我正在爲jQuery而苦苦掙扎，而且我在這個項目中使用了很多。

謝謝！

來源

2014-09-18 Brittnie O' Salazar

我相信你忘了在你的小提琴中加載jQuery庫。此外，名稱爲ifmachinery的輸入元素不存在...我相信您指的是名稱爲machinery的那個？

我通常會建議將它綁定到.change()事件，而不是將點擊事件綁定到輸入，然後根據輸入的值使用邏輯來決定做什麼。從這個意義上說，你的代碼將是可擴展的並且易於修改，並且可能更加冗長。

$(document).ready(function(){ 
    $("input[name='machinery']").change(function(){ 
     if($(this).val()=='yes') { 
      $("div.desc").show(); 
     } else { 
      $("div.desc").hide(); 
     } 
    }); 
});

http://jsfiddle.net/teddyrised/g63m9yyg/2/

如果你想要這個邏輯應用第一次加載頁面時，你就要跑/ DOM上執行這個邏輯準備好了。而不是重複的功能進行二次，即中：

$(document).ready(function(){ 
    // Run when DOM is ready 
    if($(this).val()=='yes') { 
     $("div.desc").show(); 
    } else { 
     $(("div.desc").hide(); 
    } 

    // When input is changed 
    $("input[name='machinery']").change(function(){ 
     if($(this).val()=='yes') { 
      $("div.desc").show(); 
     } else { 
      $(("div.desc").hide(); 
     } 
    }); 
});

你可以簡單地把邏輯函數，既DOM準備和輸入的onChange事件稱之爲：

$(document).ready(function(){ 
    // Define logic 
    var ifMachinery = function(ele) { 
     if(ele.val()=='yes') { 
      $("div.desc").show(); 
     } else { 
      $("div.desc").hide(); 
     } 
    } 

    // Run logic on DOM ready 
    ifMachinery($("input[name='machinery']")); 

    // Run logic when input onChange is fired 
    $("input[name='machinery']").change(function() { 
     ifMachinery($(this)); 
    }); 
});

http://jsfiddle.net/teddyrised/g63m9yyg/3/

來源

2014-09-18 23:39:52 Terry

用單選按鈕切換div的外觀

回答

相關問題