三個自定義jQuery滑塊不工作的實例

Question

我在我的頁面上有三個jQuery滑塊實例，但只有一個似乎正常工作。例如，按1-12按鈕僅適用於第一個框，而滑塊選擇選項僅適用於一個選項。我該如何解決這個問題？

滑塊只能在其框中改變複選框（同樣適用於用戶按下按鈕時）。

這是到目前爲止我的代碼和jsfiddle：

// slider 

    $(".slider_weekRange").slider({ 
     range: true, 
     min: 1, 
     max: 15, 
     step: 1, 
     values: [1, 12], 
     slide: function (event, ui) { 
      $(".search_weekRange").val(ui.values[0] + "-" + ui.values[1]); 
     } 
    }); 
    $(".search_weekRange").val($(".slider_weekRange").slider("values", 0) + 
     "-" + $(".slider_weekRange").slider("values", 1)); 

$(".slider_weekRange2").slider({ 
    range: true, 
    min: 1, 
    max: 15, 
    step: 1, 
    values: [1, 12], 
    slide: function (event, ui) { 
     $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]); 
     $('input:checkbox[name="weeks_1"]').prop("checked", false); 
     $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true); 
    } 
}); 
$(".search_weekRange2").val($(".slider_weekRange2").slider("values", 0) + 
    "-" + $(".slider_weekRange2").slider("values", 1)); 

// no weeks 

$('.week_none').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $(".search_weekRange2").val(''); 
}); 

// all week 

$('.week_all').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", true); 
    $(".search_weekRange2").val('1-15'); 
}); 

// weeks 1-12 

$('.week_term').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true); 
    $(".search_weekRange2").val('1-12'); 
}); 

// odd weeks 

$('.week_odd').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:even').prop("checked", true); 
    $(".search_weekRange2").val('1,3,5,7,9,11,13,15'); 
}); 

// even weeks 

$('.week_even').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:odd').prop("checked", true); 
    $(".search_weekRange2").val('2,4,6,8,10,12,14'); 
}); 

// checkbox 

$('input:checkbox[name="weeks_1"]').click(function() { 
    var s = []; 
    $('input:checkbox[name="weeks_1"]').each(function() { 
     if (this.checked) { 
      s.push($(this).next().text()); 
     } 
    }); 
    $(".search_weekRange2").val(s.join(',')); 
}); 

Answer 1

的問題是，你搜索的複選框，同時將通過.slice()你從0到15的範圍內只選擇複選框的一個子集，這顯然僅匹配第一個框中的複選框。

而不是

slide: function (event, ui) { 
    $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]); 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true); 
} 

使用本

slide: function (event, ui) { 
    $(this).parent().find(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]); 
    $(this).parent().find('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $(this).parent().find('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true); 
} 

這裏是jsFiddle