首页 文章

jQuery计算天数并隐藏复选框

提问于
浏览 次
1

我的持续时间为3天，7个复选框代表一周中的每一天 . 我想能够检查一天，然后隐藏接下来的2天（总共3天） .

enter image description here

如果我们考虑3天的持续时间：我检查星期一，那么星期二和星期三将被隐藏 . 然后我可以检查星期四，星期五和星期六将被隐藏：

enter image description here

我写了以下部分工作：

var toHide = new Array(0,0,0,0,0,0,0,0);
$('.days').change(function() {
 var val = $(this).val();
 var duration = $('#duration').val();
 if($('#check'+val).prop('checked')) {
    scheduleSelection(val,duration,'on');
 }else{
    scheduleSelection(val,duration,'off');
 }
});

function scheduleSelection(id,duration,mode) {
 var totalDays = duration;
 if(totalDays>1) {
  totalDays--;
    var next = parseInt(id)+1;
    for(i=1;i<=totalDays;i++) {
        if(next>7) { next = 1; }
        if(mode=='on') {
            toHide[next] = 1;
            $('#check'+next).hide();
        }else{
            toHide[next] = 0;
            $('#check'+next).show();
        }
        next++;
    }
 }
}

这里的问题是如果你要检查星期一，那么星期二和星期三将被隐藏，但如果你再检查星期六，那么星期日和星期一将被隐藏，但星期二和星期三将保持隐藏：

enter image description here

请参阅 jsFiddle

任何正确方向的指针都值得赞赏

javascript jquery

2 回答

  • 1

    我喜欢巴勃罗的回答 . 我认为你应该使用它 . 我的解决方案有效，但有点脏 . 无论如何它在这里：https://jsfiddle.net/ndaj4x3L/3/

    if($('#check'+next).is(":checked")) {
    $('#check'+next).trigger('click');
    $('#check'+next).hide();
    $('#check'+id).trigger('change');
}

    编辑：我触发点击后再次触发更改的原因是因为某些原因循环在函数再次运行后停止 . 可能与变量名称相同或某事有关，我不太确定，但无论如何应该修复它 .

    回复于
  • 1

    也许如果你也隐藏预览天数并取消选中隐藏的元素可能是一个很好的解决方案 .

    function scheduleSelection(id,duration,mode) {
//var oneDay = 86400;
var totalDays = duration;

if(totalDays>1) {
    totalDays--;
    var next = parseInt(id)+1;
    var prev = parseInt(id)-1;
    for(i=1;i<=totalDays;i++) {
        if(next>7) { next = 1; }
        if(prev<1) { prev = 7; }
        if(mode=='on') {
            toHide[next] = 1;
            toHide[prev] = 1
            $('#check'+next).hide();
            $('#check'+next).attr("checked",false);
            $('#check'+prev).hide();
            $('#check'+prev).attr("checked",false);
        }else{
            toHide[next] = 0;
            toHide[prev] = 0;
            $('#check'+prev).show();
            $('#check'+next).show();
        }
        next++;
        prev--;
    }
  }
}

    example jsFiddle

    回复于

相关问题