javascript - 在 jQuery 中，隐藏任何 :visible data div and show $(this) clicked

Question

我正在构建一个日历，其中每周都会创建表格。每周都有一个指定的数据点:连同天数。当我点击一天时，我想显示周之间的详细信息。

我遇到的问题是当我点击某一天时我只想显示当天的详细信息。使用当前代码，它会隐藏所有天。当我删除 $('.day).hide(); 它会显示所有内容。

我想隐藏所有日期，然后只显示我点击的当前日期。

我做了一个 Demo Page 在 CodePen 上。

/代码如下/

HTML

---

<table class="week" data-week="second">
    <tr>
       <td data-day="7">
            <a>7</a>
            <div class="events">
                <label class="info">Hi There</label>
            </div>
       </td>
       <td data-day="8">
            <a>8</a>
            <div class="events">
                <label class="info">Hi There</label>
            </div>
        </td>
    </tr>
</table>
<div class="details" data-week="second">
    <div class="day" data-day="7">
        Day 7 Details
    </div>
    <div class="day" data-day="8">
        Day 8 Details
    </div>
</div>

Javascript

---

$(".week, .week td").on("click", function () {
   var dow = $(this).data('day');
   var wom = $(this).data('week');

   $('.day').hide();
   $('.day[data-day=' + dow + ']').show();
   $('.details[data-week=' + wom + ']').slideToggle(500); 
});

我做了一个 Demo Page 在 CodePen 上。

Answer 1

初始选择器不应单独包含“.week”。也不见了皮。试试这个:

$(".week td").on("click", function (e) {
    var dow = $(this).data('day');
    var wom = $(this).closest('.week').data('week');
    $(".details").slideUp(500);
    $('.day').hide();
    $('.day[data-day="' + dow + '"]').show();
    $('.details[data-week=' + wom + ']').slideToggle(500); 
});

这是CodePen