Question

我的主页上有一个部分，有4个不同的选项和刷新后的更改。它们都包含在这个DIV中：

<!-- opt 1 -->
<div class="featured-post">
[IMAGE] [COPY]
</div>
<!-- opt 1 ends -->

<!-- opt 2 -->
<div class="featured-post">
[IMAGE] [COPY]
</div>
<!-- opt 2 ends -->

等

这是JS：

var elems = $("div.featured-post");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
  $(elems[i]).hide();
}
}
}

一切都很好，但我只是想知道我需要添加什么来确保只有一个框显示用户是否没有启用javascript？

Answer 1

...我需要添加哪些内容以确保只有一个框显示用户是否启用了javascript？

通过PROD_CLASS隐藏HTML中的所有内容：

style="display: none"

然后在JavaScript中，确保您显示使用随机索引选择的那个并隐藏其他索引：

<!-- opt 1 -->
<div class="featured-post" style="display: none">
[IMAGE] [COPY]
</div>
<!-- opt 1 ends -->

<!-- opt 2 -->
<div class="featured-post" style="display: none">
[IMAGE] [COPY]
</div>
<!-- opt 2 ends -->

<!-- opt 3 -->
<div class="featured-post">
[IMAGE] [COPY]
</div>
<!-- opt 3 ends -->

旁注：您不需要var elems = $("div.featured-post"); if (elems.length) { var keep = Math.floor(Math.random() * elems.length); elems.each(function(index) { $(this).toggle(index == keep); }); }检查。如果没有任何匹配的元素，由于jQuery的基于集合的性质，并且因为你elems.length没有使用elems.length来解决问题，所以没有什么不好的将会发生：

Answer 2

一种可能的方法如下。

CSS：

.featured-post{
   display:block;
}
.no-js .featured-post{
   display:none;
}
.no-js .featured-post:first-child{
   display:block;
}

在CSS中，您可以创建一个＆＃34;规则＆＃34;当no-js类应用于dom时处理样式。

HTML：

<body class="no-js">
    <!-- opt 1 -->
       <div class="featured-post">
       [IMAGE] [COPY]
       </div>
    <!-- opt 1 ends -->

    <!-- opt 2 -->
    <div class="featured-post">
       [IMAGE] [COPY]
    </div>
    <!-- opt 2 ends -->
</body>

在HTML中，您定义哪个包装元素应具有默认的no-js类

JS：

document.querySelector('body').attr("class", "");

在JS中，您只需从包装元素中删除no-js类。如果用户禁用了javascript，则会删除WON类，这会导致应用no-js css类规则并产生所需的输出

如何确保在禁用javascript时只剩下一个DIV？

2 个答案: