如何在JS中结合浏览器检测正确使用AND和OR运算符解决逻辑失效问题

• 运算符优先级错误：JavaScript中&&运算优先级高于||，原代码未对逻辑组加括号，导致只要参与人数选择框匹配枚举值，不管支付方式选择框取值、不管浏览器判断结果，都会触发执行逻辑
• 取值逻辑错误：原代码仅获取了触发change事件的单个选择框的值，未同时读取两个选择框的当前取值，无法实现「支付方式满足条件 且 参与人数满足条件」的组合判断

<!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>
//浏览器检测
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";
    }
})();

jQuery(document).ready(function($){
    var isDesktop = window.matchMedia("only screen and (min-width: 760px)");
    if (isDesktop.matches) {
        // 提前定义合法枚举值，后续维护更便捷
        const allowedPartecipanti = ['partecipanti-1', 'partecipanti-2', 'partecipanti-3', 'partecipanti-4', 'partecipanti-5'];
        const allowedModalita = ['acconto-saldo', 'tre-rate', 'unica-soluzione'];
        jQuery('select#pa_modalita-pagamento , select#pa_partecipanti').on('change', function() {
            // 同时读取两个选择框的当前值
            const modalitaVal = $('#pa_modalita-pagamento').val();
            const partecipantiVal = $('#pa_partecipanti').val();
            // 先判断两个选择框都满足基础条件
            if (allowedModalita.includes(modalitaVal) && allowedPartecipanti.includes(partecipantiVal)) {
                // 按浏览器类型执行不同逻辑，可根据需求调整不同浏览器的执行代码
                if (browser === 'Mozilla Firefox') {
                    // 火狐浏览器专属执行逻辑
                    setTimeout(function(){ $(".woocommerce-variation-description").transition({ x: '0px', y: '5px' }); }, 100);
                } else {
                    // 其他浏览器执行逻辑
                    setTimeout(function(){ $(".woocommerce-variation-description").transition({ x: '0px', y: '5px' }); }, 100);
                }
            }
        });
    }
});
</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>

内容的提问来源于stack exchange，提问作者Alessio Angeloro