0

イベントを選択するフォームがあります。これらは、次のような日付と時刻を保持する値を持つラジオ オプションです。

10/31(木) | 午後 1:00 ～ 午後 3:15

問題は、時間的に重複するいくつかのイベントがあり、フォームに入力するユーザーが重複する時間を選択できないことです。私が達成する必要があるのは、時間の重複が発生したときに、互いに競合しているすべてのオプションに赤い背景を与えることです。私はjQueryを試してきましたが、解決策を思いつくことができません. これまでのところ、私はこれを持っています:

すべてのラジオ オプションには .time クラスがあります

$(document).ready(function() {
    var map = {};
    $(".time").change(function() {
        var value = $(this).val();
        map[$(this).attr('name')] = value;
        $(".time").each(function() {
            if ($(this).is(':checked')) {
                time = $(this).val();
                tr = $(this).closest('tr');
                $.each(map, function(key, val) {
                    if (val == time) {
                        tr.addClass('red');
                    } else {
                        tr.removeClass('red');
                    }
                });
            }
        });
    });
});

上記は私が望んでいたようには機能しません。実際、期待どおりにはまったく機能しません。誰かが光を当てることができれば、私はそれを大いに感謝します.

4

1 に答える 1

0

私はこれがあなたが望むものだと信じています

<script type="text/javascript">
    $(".time").change(function() {
        var values = $("input.time").map(function(){
            return $(this).val();
        });
        values.each( function (){
            var overlapping = $("input.time[value='"+ this +"']");
            if (overlapping.filter(":checked").length > 1){                            
                overlapping.parents("tr").addClass("red");}
            else{
                overlapping.parents("tr").removeClass("red");
            }
        })
    });
</script>

最初にすべてのラジオ ボタンの値をマップし、次に各値のチェックされたカウントに従って、それぞれの赤のクラスを追加/削除します。

http://jsfiddle.net/4rJTR/

于 2013-09-13T11:59:24.900 に答える