2

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

2 回答 2

0

您的“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 的其余部分是什么样子。

于 2012-05-25T00:41:05.053 回答
0

如果您使用的是 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-25T00:43:59.213 回答