Question

我允许用户通过使用列表为一周中的每一天选择小时。在视觉上，列表只是在它们内部的凌晨1点，凌晨2点，凌晨3点等的盒子，并且当点击时突出显示它们被“选中”。为此，我在li项目中添加了一个“小时选择”类。

我还需要跟踪用户每天点击的小时数（那些类为'小时选择'的小时。我知道这个逻辑可以正常运行，因为我之前使用过此代码，但只有一天。在此例如，我需要在同一页面上显示所有日子。

对我的原始代码进行了一些更改，我想出了这个，但我觉得必须进行一些优化，以防止重复的js用于推动每天的选定时间，但我没有想法和想做这件事......

html :(这会在一周中的每一天都重复，而且每天的ID都不同）

<ol id="hour-select-mon" class="clearfix">
    <li class="">12am</li>
    <li class="">1am</li>
    <li class="">2am</li>
    <li class="">3am</li>
    <li class="">4am</li>
    <li class="">5am</li>
    <li class="">6am</li>
    <li class="">7am</li>
    <li class="">8am</li>
    <li class="">9am</li>
    <li class="">10am</li>
    <li class="">11am</li>
    <li class="">12pm</li>
    <li class="">1pm</li>
    <li class="">2pm</li>
    <li class="">3pm</li>
    <li class="">4pm</li>
    <li class="">5pm</li>
    <li class="">6pm</li>
    <li class="">7pm</li>
    <li class="">8pm</li>
    <li class="">9pm</li>
    <li class="">10pm</li>
    <li class="">11pm</li>
</ol>

JS：

$('#hour-select-mon li, #hour-select-tue li, #hour-select-wed li, #hour-select-thu li, #hour-select-fri li, #hour-select-sat li, #hour-select-sun li').on('click', function() {
  $(this).toggleClass('hour-selected'); 
});

// get selected hours in array
var monHours = var tueHours = var wedHours = var thuHours = var friHours = var satHours = var sunHours = [];

$('#hour-select-mon .hour-selected').each(function(k,v) {
    monHours.push($(v).text());
});

$('#hour-select-tue .hour-selected').each(function(k,v) {
    tueHours.push($(v).text());
});

$('#hour-select-wed .hour-selected').each(function(k,v) {
    wedHours.push($(v).text());
});

$('#hour-select-thu .hour-selected').each(function(k,v) {
    thuHours.push($(v).text());
});

$('#hour-select-fri .hour-selected').each(function(k,v) {
    friHours.push($(v).text());
});

$('#hour-select-sat .hour-selected').each(function(k,v) {
    satHours.push($(v).text());
});

$('#hour-select-sun .hour-selected').each(function(k,v) {
    sunHours.push($(v).text());
});

Answer 1

或者，如果您想立即收集所有选定的项目，可以使用与此类似的代码：

var selected = {};
$('.hour-selected').each(function(k,v) {
    var day = $(v).parent().attr('id').substr(-3, 3);
    selected[day] = selected[day] || [];
    selected[day].push($(v).text());
});

Answer 2

试试这个

var selectedHours = {};

$('ol > li').on('click', function() {
    var li = $(this);
    li.toggleClass('hour-selected');
    var parentId = $(this).parent().attr("id");
    selectedHours[parentId] ? selectedHours[parentId].push(li.text()) : selectedHours[parentId] = [li.text()]
});

selectedHours将具有以下结构

{ 
    "hour-select-mon" : ["4pm", "6pm"],
    "hour-select-tue" : ["9am"],
    ...
}

js选择一周中每一天的小时数

2 个答案: