2

これは、StackOverflowに関する私の最初の質問です。私は通常、検索からすべての答えを見つけますが、次のコードを書いた後、私は完全にモチベーションを失っています。

次のコードを書くためのより効率的な方法や速記はありますか？

現在、それはまさに私が望むことをします。ラジオボタンをクリックすると、そのラジオボタンの横にdivがロードされます。ラジオボタンを切り替えると、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');
});

DOM の残りの部分がどのように見えるかに応じて、単に remove() を呼び出すことができます。

于 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 に答える