Question

我有一个包含2行5列的表，每列都有一个代表一天的类。我也有一个js，如果浏览器的宽度/高度小于或等于400，应该应检测到今天是什么日子，并删除所有其他类中的每个元素，但不要删除今天的类中的每个元素。问题是：它不起作用。请，如果可能的话，请使用纯JavaScript而不是jQuery或其他内容进行回答。需要明确的是：没有一个班级称为“今天”。

var w = window.innerWidth;
var h = window.innerHeight;
var d = new Date();
var n = d.getDay();
var days = [
    document.getElementsByClassName('sun'),
    document.getElementsByClassName('mon'),
    document.getElementsByClassName('tue'),
    document.getElementsByClassName('wed'),
    document.getElementsByClassName('thu')
];

if (w <= 400 || h <= 400) {
    console.log(n)
    if (n == 0) {
        //remove all elements except the elements of the class
        while (days[1].hasChildNodes()) {
            days[1].removeChild(days[1].firstChild);
        }
        while (days[2].hasChildNodes()) {
            days[2].removeChild(days[2].firstChild);
        }
        while (days[3].hasChildNodes()) {
            days[3].removeChild(days[3].firstChild);
        }
        while (days[4].hasChildNodes()) {
            days[4].removeChild(days[4].firstChild);
        }
    };
    //same for different days...
}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

<table>
    <tr>
        <th>title text 1st row</th>
        <td class="sun">sunday class text</td>
        <td class="mon">monday class text</td>
        <td class="tue">tuesday class text</td>
        <td class="wed">wednesday class text</td>
        <td class="thu">thursday class text</td>
    </tr>
    <tr>
        <th>title text 2nd row</th>
        <td class="sun">sunday class text</td>
        <td class="mon">monday class text</td>
        <td class="tue">tuesday class text</td>
        <td class="wed">wednesday class text</td>
        <td class="thu">thursday class text</td>
    </tr>
</table>

Answer 1

好。您可以使用CSS进行大多数操作：

@media screen and (max-width:400px) {
    .mon,
    .tue,
     .wed,
     .thu { 
       display:none;
    }
    .today { display:block }

}

对于您的特定问题，您需要确定今天是星期几，并向与该天匹配的元素添加一个类。然后在媒体查询中定位该元素。

这样的事情。

var d = new Date();
var weekday = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

var elements = document.getElementsByClassName(weekday[d.getDay()]);

Array.prototype.forEach.call(elements, function(element) {
    elemenet.className = "today"; 
});

如何根据屏幕尺寸删除元素

1 个答案: