如果 else 语句在类不存在时中断，则会导致 null

Question

我正在创建一个if/else语句循环来检查类是否存在。如果存在，获取html属性数据id，并在光滑的旋转木马initialSlide中显示其值。如果没有，它将在第二个else/If上检查类是否存在，如果它确实这样做了。如果第一个和第二个语句失败，则执行else语句。

位置幻灯片-活动类是在对象日期与今天匹配并显示该类时设置的。如果对象日期在未来几天，位置幻灯片-活动类将不显示，而只显示地点幻灯片-即将发生的事件。

问题是，当locations slide--active类不存在时，它将变为null，我的第一个if/else循环将中断，不会转到第二个else/if语句。

我如何检查该类不存在，如果它是null，它将转到第二个else语句？我想我必须以某种方式进行循环，以理解一个类不存在，它是一个null，但仍然会转到第二个else/if语句。

setActiveSlidePosition是一个变量，用于设置光滑转盘的initialSlide。

JS-

var getActiveSlide = document.querySelector(".locations-slide--active");
var getUpcomingSlide = document.querySelector(".locations-slide--upcoming-event");
if (getActiveSlide.classList.contains('locations-slide--active')) {
var setActiveSlidePosition = getActiveSlide.getAttribute('data-id');
} else if (getUpcomingSlide.classList.contains('locations-slide--upcoming-event')) {
var setActiveSlidePosition = getUpcomingSlide.getAttribute('data-id');
} else {
var setActiveSlidePosition = 0;
}

带位置的HTML幻灯片--活动

<div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 273px;" role="tabpanel" id="slick-slide02">
<div class="locations-slide locations-slide--past-event" data-id="1">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 01 2022</p>
</div>
</div>
<div class="locations-slide locations-slide--active" data-id="2">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 12 2022</p>
</div>
</div>
<div class="locations-slide locations-slide--upcoming-event" data-id="3">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 15 2022</p>
</div>
</div>
</div>

没有位置的HTML幻灯片-活动并且这个类不存在并且成为空

<div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 273px;" role="tabpanel" id="slick-slide02">
<div class="locations-slide locations-slide--past-event" data-id="1">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 01 2022</p>
</div>
</div>
<div class="locations-slide locations-slide--upcoming-event" data-id="2">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 14 2022</p>
</div>
</div>
<div class="locations-slide locations-slide--upcoming-event" data-id="3">
<div class="locations-slide-inner">
<p class="date heading--h3 font--bold text--uppercase">Aug 15 2022</p>
</div>
</div>
</div>

希望我能解释清楚。

Answer 1

您可以使用可选的链接：，而不是直接引用对象上的属性

if (getActiveSlide?.classList.contains('locations-slide--active')) {
//                ^--- here
var setActiveSlidePosition = getActiveSlide.getAttribute('data-id');
} else if (getUpcomingSlide?.classList.contains('locations-slide--upcoming-event')) {
//                         ^--- here
var setActiveSlidePosition = getUpcomingSlide.getAttribute('data-id');
} else {
var setActiveSlidePosition = 0;
}

关键区别在于：

如果引用为零(null或undefined(，表达式将短路，返回值为undefined，而不是导致错误

由于undefined是错误的，因此条件将求值为false并继续使用if/else链。

Answer 2

您不需要检查由类名选择的元素是否包含类名(它会(。你只需要检查它是否存在。

var getActiveSlide = document.querySelector(".locations-slide--active");
var getUpcomingSlide = document.querySelector(".locations-slide--upcoming-event");
if (getActiveSlide) {
var setActiveSlidePosition = getActiveSlide.getAttribute('data-id');
} else if (getUpcomingSlide) {
var setActiveSlidePosition = getUpcomingSlide.getAttribute('data-id');
} else {
var setActiveSlidePosition = 0;
}