以下代码的简写或效率

这是我在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

以下代码的简写或效率

回答

相关问题