如何在 JS 中使用 AND 和 OR 运算符进行浏览器检测
Posted
技术标签:
【中文标题】如何在 JS 中使用 AND 和 OR 运算符进行浏览器检测【英文标题】：How to use AND and OR operator in JS with browser detection 【发布时间】：2021-12-06 18:03:47 【问题描述】：OR 运算符在 AND 之后不起作用。我需要的逻辑是：如果第一个选择（# pa_modalita-pagamento）的值为“account-saldo”，第二个选择（#pa_participanti）的值为“participante-1”或“participanti-2”或“participanti- 3"，等等我做的东西。那么如果第一个选择（#pa_modalita-pagamento）的值为“tre-rate”，第二个选择（#pa_participanti）的值为“participante-1”或“participanti-2”或“participanti-3”，依此类推关于我做的事情，等等，等等。 而且我必须为不同的浏览器执行不同的代码。 https://jsfiddle.net/alessioangeloro/bf9gsL20/4/上的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script>
//browser detection
var browser = (function()
var test = function(regexp) return regexp.test(window.navigator.userAgent)
switch (true)
case test(/edg/i): return "Microsoft Edge";
case test(/trident/i): return "Microsoft Internet Explorer";
case test(/firefox|fxios/i): return "Mozilla Firefox";
case test(/opr\//i): return "Opera";
case test(/ucbrowser/i): return "UC Browser";
case test(/samsungbrowser/i): return "Samsung Browser";
case test(/chrome|chromium|crios/i): return "Google Chrome";
case test(/safari/i): return "Apple Safari";
default: return "Other";
)();
//if (browser == 'Mozilla Firefox' )alert('CIAO')
//alert(browser)
jQuery(document).ready(function($)
var isDesktop = window.matchMedia("only screen and (min-width: 760px)");
if (isDesktop.matches)
jQuery('select#pa_modalita-pagamento , select#pa_partecipanti').on('change', function()
var val = jQuery(this).val();
if (browser ==='Mozilla Firefox' && val ==='acconto-saldo' || val === 'partecipanti-1' || val === 'partecipanti-2' || val === 'partecipanti-3' || val === 'partecipanti-4' || val === 'partecipanti-5') // not detect the browser
setTimeout(function() jQuery(".woocommerce-variation-description").transition( x: '0px', y: '5px' ); , 100);
else if (val ==='tre-rate' || val === 'partecipanti-1' || val === 'partecipanti-2' || val === 'partecipanti-3' || val === 'partecipanti-4' || val === 'partecipanti-5')
setTimeout(function() jQuery(".woocommerce-variation-description").transition( x: '0px', y: '5px' ); , 100);
else if (val ==='unica-soluzione' || val === 'partecipanti-1' || val === 'partecipanti-2' || val === 'partecipanti-3' || val === 'partecipanti-4' || val === 'partecipanti-5')
setTimeout(function() jQuery(".woocommerce-variation-description").transition( x: '0px', y: '5px' ); , 100);
);
);
</script>
<script>
</script>
</head>
<body>
<div style="margin-top:10rem;">
<div class="woocommerce-variation-description">
<select id="pa_modalita-pagamento">
<option value="">Scegli un'opzione</option>
<option value="acconto-saldo">Acconto + saldo</option>
<option value="tre-rate">Tre rate</option>
<option value="unica-soluzione">Unica soluzione</option>
</select>
<select id="pa_partecipanti">
<option value="">Scegli un'opzione</option>
<option value="partecipanti-1">1 partecipante</option>
<option value="partecipanti-2">2 partecipanti</option>
<option value="partecipanti-3">3 partecipanti</option>
<option value="partecipanti-4">4 partecipanti</option>
<option value="partecipanti-5">5 partecipanti</option>
</select>
</div>
</div>
</body>
</html>
【问题讨论】：
这里必须要问的问题——你为什么要执行任何浏览器检测？在绝大多数情况下，不再需要它了。如果您不能为所有必需的浏览器可靠地创建必要的功能，则特征检测/优雅降级是更好的方法。 嗨，Rory，由于使用 Elementor 和许多种类的附加组件的网站上的 CSS 和 JS 冲突，我更喜欢检测浏览器，而不是在 div 中嵌入 CSS。 【参考方案1】：如果在相同的条件下使用AND和OR，则需要使用括号。
if (browser ==='Mozilla Firefox' && (val ==='acconto-saldo' || val === 'partecipanti-1' || val === 'partecipanti-2' || val === 'partecipanti-3' || val === 'partecipanti-4' || val === 'partecipanti-5'))
顺便说一句，您可以将所有接受的值添加到一个数组中并使 if 更短
let participanti = ['partecipanti-1','partecipanti-2','partecipanti-3','partecipanti-4','partecipanti-5'];
if (if (browser ==='Mozilla Firefox' && participanti.includes(val))
...
【讨论】：
嗨@Balastrong 这段代码不起作用，即使浏览器是 Opera 也能运行；任何想法 ？ if (browser ==='Mozilla Firefox' && (val ==='acconto-saldo' || val === 'partecipanti-1' || val === 'partecipanti-2' || val === ' partecipanti-3' || val === 'partecipanti-4' || val === 'partecipanti-5'))以上是关于如何在 JS 中使用 AND 和 OR 运算符进行浏览器检测的主要内容，如果未能解决你的问题，请参考以下文章