以下代碼的簡寫或效率

這是我在Stack Overflow上的第一個問題。我通常會從搜索中找到所有我的答案，但在編寫下面的代碼後，我完全沒有動力。以下代碼的簡寫或效率

有沒有更有效的方法或者簡寫下面的代碼？

目前它正是我想要的。當你點擊一個單選按鈕時，一個div被加載到該單選按鈕旁邊。如果您切換單選按鈕，則會刪除div並在該單選按鈕旁邊創建一個新的。

我對寫自己的JavaScript/jQuery相當陌生。我知道CASE，但我不完全確定這是否是一個好的情況。

任何建議將不勝感激。

jQuery(document).ready(function($) { 

var checkedItem = true; 

$('form input').click(function(){ 

    if (checkedItem == true){ 
     $(this).siblings('div.next').remove('.checked'); 
     $(this).after('<div class="next">NEXT</div>'); 
     $(this).siblings('div.next').addClass('checked'); 

     checkedItem = false; 

    } 
    else { 
     $(this).siblings('div.next').remove('.checked'); 
     $(this).after('<div class="next">NEXT</div>'); 
     $(this).siblings('div.next').addClass('checked'); 

     checkedItem = true;  
    } 

}); 

}); 


    <form id="input-form"> 
<input class="PAD" type="radio" name="Seasons" value="Spring-Fall" /> Spring-Fall<br /> 
<input class="PAD" type="radio" name="Seasons" value="Winter" /> Winter 
</form>

來源

2012-05-25 user1416306

在jquery選擇，你不必做的事情，如「div.next」。如果它接下來有類，只需使用「.next」 – SpYk3HH

您是否在尋找更高效的編寫代碼，更易於閱讀，或者在運行時更高效？另外，'if'內的前三行與'else'分支內的前三行完全相同 - 是一個錯誤嗎？ – nnnnnn

多次調用'$（this）'效率非常低，請創建一個單引用並使用該引用。 'var input = $（this）;'然後在所有使用'$（this）'的地方使用'input'。 – RobG

如果你在jQuery的1.7+，您可以：

HTML

<form id="input-form"> 
    <input class="PAD" type="radio" name="Seasons" value="Spring-Fall" /> 
    Spring-Fall<br /> 
    <input class="PAD" type="radio" name="Seasons" value="Winter" /> Winter 
</form>

jQuery的

$(function() { 
    $("input[type=radio]").click(function() { 
     if ($(this).is(":checked")) { 
      $(this).siblings('.next').remove('.checked'); 
      $(this).after('<div class="next">NEXT</div>'); 
      $(this).siblings('.next').addClass('checked'); 
     } 
     else { // fyi, this, or your var is kinda useless redundancy, but just for purpose of show, here ya go 
      $(this).siblings('.next').remove('.checked'); 
      $(this).after('<div class="next">NEXT</div>'); 
      $(this).siblings('.next').addClass('checked'); 
     }; 
    }); 
});

雖然你可以很容易地簡化整個事情與：

$(function() { 
    $("input[type=radio]").click(function() { 
     $(this).siblings('.next').remove(); 
     $(this).after($("<div />").addClass("next checked").text("NEXT")); 
    }); 
});

來源

2012-05-25 00:43:59 SpYk3HH

'this.checked'比'$（this）.is（「：checked」）'更高效，更易於閱讀。 – nnnnnn

嗯，番茄番茄 – SpYk3HH

是的，謝謝。我很累，一整天都在做一個項目。 – user1416306

你的「checkedItem」布爾值有什麼用途？

看來這樣的功能將完成同樣的事情（見http://jsfiddle.net/ZGQf3/3）：這取決於你的DOM的其餘部分看起來像

$('form input[type=radio]').click(function(){ 
    $('.next').remove('.checked') 
    var $this = $(this); 
    $this.after('<div class="next">NEXT</div>'); 
    $this.siblings('.next').addClass('checked'); 
});

你可以想見，只需調用remove（）方法。

來源

2012-05-25 00:41:05 AlexCuse

以下代碼的簡寫或效率

回答

相關問題