使用if-else语句添加类

Question

HTML:

<!-- draggable -->
<div class="draggable">
<img src="img/draggable.png" alt="draggable" />
<div class="drag-area">
<div class="year year1"></div>
<div class="year year2"></div>
<div class="year year3"></div>
<div class="year year4"></div>
<div class="year year5"></div>
<div class="year year58"></div>
<div class="btn btn-draggable-ball">
<img src="img/draggable-ball.png" alt="draggable-ball" />
</div>
</div>
</div>
<!-- popup -->
<div class="btn btn-popup" id="btn-popup"></div>
<div class="popup-1" id="popup" style="z-index: 50">
<div class="answer-1"></div>
<div class="answer-2"></div>
<div id="close" class="btn"></div>
</div>
<div class="popup-2" id="popup" style="z-index: 50">
<div class="answer-2-2"></div>
<div id="close" class="btn"></div>
</div>

JS:

$(".btn-draggable-ball").on("touchend", (e) => {
e.preventDefault();
// $(".year2").addClass("drop");
// $(".year58").addClass("drop");
if ($(".year").hasClass("year2")) {
$(".year2").addClass("drop");
} else if ($(".year").hasClass("year58")) {
$(".year58").addClass("drop");
}
});
$(".btn-popup").on("click", () => {
if ($(".year2").hasClass("drop")) {
$(".popup-1").show();
} else if ($(".year58").hasClass("drop")) {
$(".popup-2").show();
} else {
return false;
}
});
$(".popup-1 #close").on("click", () => {
$(".popup-1").hide();
});
$(".popup-2 #close").on("click", () => {
$(".popup-2").hide();
});

现在我使用draggable做if-else语句来判断和添加类，添加类后，当我单击按钮时，它可以显示不同的内容。

我有一些问题，

1. If else在touchend上的语句不起作用
2. 即使我把球拖到另一个div，它也会执行if条件，而不能执行else-if条件

Answer 1

else if不起作用，因为您的第一个if条件已经为true。这将永远是真的，因为您的.year总是具有类.year2。这就是为什么只有.year2得到更新。

您已经在.year2中添加了一个类，我在该部分对它进行了测试，它实际上运行得非常好。