Question

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

Answer 1

你的“checkedItem”布尔值用于什么目的？

看起来像这样的函数会完成同样的事情（参见http://jsfiddle.net/ZGQf3/3）：

$('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（），具体取决于DOM的其余部分。

Answer 2

如果你使用的是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"));
    });
});

以下代码的简写或效率

2 个答案: