Question

在我的下面的代码中有四个单选按钮。如果你点击其中一个，它将执行一个功能来激活＆＃34; next＆＃34;按钮。单击＆＃34; next＆＃34;，div将滑动。

如果我多次单击其他选项/单选按钮，该功能也会执行多次，并且div会继续滑动。我该如何防止这种情况？即使我选择了多个单选按钮，我也只想让div滑动一次。

JSfiddle例如：http://jsfiddle.net/Lqjy6vja/

<div>
<ul id="orderform">
    <li class="formitem">
        <input type="radio" name="jcolour" id="jcolour1" value="Black/Red Jersey" /><label for="jcolour1">Black/Red</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour2" value="Black/White Jersey" /><label for="jcolour2">Black/White</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour3" value="White/Black Jersey" /><label for="jcolour3">White/Black</label><br/><br/>
        <input type="radio" name="jcolour" id="jcolour4" value="Custom Jersey" /><label for="jcolour4">Custom Jersey</label>
        <div class="nextbtn">Next ></div>
    </li>
    <li class="formitem">2</li>
</ul>
</div>
<script>
$(document).ready(function(){
    $(".nextbtn").prop('disabled', true).css("opacity","0.4");
    var winwidth=$(window).width();
    $("#orderform li").width(winwidth);
    $('input:radio[name=jcolour]').change(function () {
    $(this).closest(".formitem").find(".nextbtn").css("opacity","1");
    $(".nextbtn").click(function(){
        $("#orderform").animate({
            marginLeft: '-='+winwidth
        });
    });
});
</script>

Answer 1

这是因为您为每个选项click事件设置了change事件。因此，当您click div时，每个附加的click事件都会执行。您只需将点击事件处理程序置于 change事件后设置一次：

$(".nextbtn").prop('disabled', true).css("opacity","0.4");
var winwidth=$(window).width();
$("#orderform li").width(winwidth);

$('input:radio[name=jcolour]').change(function () {
    $(this).closest(".formitem").find(".nextbtn").css("opacity","1");
});
$(".nextbtn").click(function(){
    $("#orderform").animate({
        marginLeft: '-='+winwidth
    });
});

以下是更新后的JSFIDDLE

Answer 2

 Do like this , It will work.

            <div>
                    <ul id="orderform">
                        <li class="formitem">
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour1" value="Black/Red Jersey"
                                isslide="false" /><label for="jcolour1">Black/Red</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour2" value="Black/White Jersey"
                                isslide="false" /><label for="jcolour2">Black/White</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour3" value="White/Black Jersey"
                                isslide="false" /><label for="jcolour3">White/Black</label><br />
                            <br />
                            <input type="radio" name="jcolour" class="jcolour" id="jcolour4" value="Custom Jersey"
                                isslide="false" /><label for="jcolour4">Custom Jersey</label>
                            <div class="nextbtn">
                                Next ></div>
                        </li>
                        <li class="formitem">2</li>
                    </ul>
                </div>


            <script type="text/javascript">
                    $(document).ready(function () {
                        $(".nextbtn").prop('disabled', true).css("opacity", "0.4");
                        var winwidth = $(window).width();
                        $("#orderform li").width(winwidth);
                        $('input:radio[name=jcolour]').change(function () {
                            debugger;
                            var slideval = $('.jcolour').attr('isslide');
                            if (slideval == "false") {
                                $('.jcolour').attr('isslide', 'true');
                                $(this).closest(".formitem").find(".nextbtn").prop('disabled', false).css("opacity", "1");
                                $(".nextbtn").click(function () {
                                    $("#orderform").animate({
                                        marginLeft: '-=' + winwidth
                                    });
                                });
                            }
                        });
                    });
                </script>

即使多次选择单选按钮，也只执行一次功能

2 个答案: