Javascript - 仅显示 div 与设备是横向的

Question

我的脚本有问题。

我仅在#total=0时显示隐藏的div#alert，而我正在寻找的是仅在屏幕横向时显示它。(请参阅 CSS(。

要添加的脚本片段是什么，它评估屏幕是否横向？

请参阅在线演示(JSFiddle(。

提前谢谢。

$(document).ready(function () {
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = parseFloat($("#total").val());
if (totalStorage != null && total === 0) {
total = totalStorage;
}
if (total > 99.99 && total < 299.99) {
console.log("PASS");
$('#regalo').show();
$('#alert').hide();
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function () {
$('.tooltip').fadeOut('slow');
}, 2000);
//--------------------
if (!$("#notify")[0].paused) { //play audio
$("#notify")[0].pause(); //play audio
$("#notify")[0].currentTime = 0; //play audio
} else { // play audio
setTimeout(function () { //play audio
$("#notify")[0].play(); //play audio
})
}; //play audio
//--------------------
localStorage.setItem('suppress_gift_tooltip_1', 'true')
}
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
} else {
console.log("FAIL");
$('#alert').hide();
$('#regalo').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val()));
}
});
manageRegalo();
});

.CSS：

#alert,
.tooltip {
display: none
}
@media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block;
}
}

.HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo">Regalo</div>
<br>
<div class="tooltip">Tooltip</div>
<br>
<div id="alert">Alert</div>
<br>
<input type="text" id="total" value="">
<button type="button" class="bbp">Enter</button>

Answer 1

你的问题基本上在这里：

var total = parseFloat($("#total").val());

因此在这里

} else if (!total) {
$('#regalo').hide();
$('#alert').show();

第一次读取total时，它提供了NaN，然后else if (!total)正在执行$('#alert').show();

因此，您会看到alert消息。