在jQuery中，隐藏任何：可见的数据div并显示$（this）点击

Question

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

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

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

我在CodePen上创建了 Demo Page 。

/ Code Below /

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); 
});

我在CodePen上创建了 Demo Page 。

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