使用jQuery结合Safari浏览器检测和.on('change', function()答案

【问题标题】：Combine Safari browser detection and .on('change', function () using jQuery使用jQuery结合Safari浏览器检测和.on('change', function()
【发布时间】：2019-05-04 07:07:12
【问题描述】：

我的目标是使用 jQuery 和 CSS 修复 Safari 错误（选择框文本居中不起作用）。当页面第一次加载时它工作得很好。这是我编写的代码 - jQuery 和纯 JavaScript 之间的一些混合，但它完成了工作：

HTML：

<div class="selectbox">
    <select name="filter1" id="selector">
       <option value="option1">Jackets</option>
       <option value="option2">Shoes</option>
       <option value="option3">Trouseres</option>
    </select>
</div>

Javascript：

$(document).ready(function() {
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  {
       $(document).ready(function() {
          if(document.getElementById('selector').value=='option1') {
             $(".selectbox").addClass("opt1");
          }
          else if(document.getElementById('selector').value=='option2') {
             $(".selectbox").addClass("opt2");
          }
          else {
             $(".selectbox").addClass("opt3");
          }
       });
    };
});

CSS：

/* This positions the select option text in Safari */
.selectbox.opt1 select {
    padding-left: 44px!important;
}
.selectbox.opt2 select {
    padding-left: 35px!important;
}
.selectbox.opt3 select {
    padding-left: 51px!important;
}

如果检测到 Safari，则会在 div 类“选择框”中添加一些额外的类名称 - 取决于选择框中选择的值。然后，我可以使用 padding-left 在 CSS 中独立地格式化每个复合类，这允许我居中选择不同长度的框文本。

现在我想在选择框选择更改时也能正常工作，这就是我在 Javascript 中尝试过的：

var selectvar = 'False';
    $(document).ready(function() {
       if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
                selectvar = 'True';
        }
    };    

$("#selector").on("change", function () {
    if((document.getElementById('selector').value=='option1') && selectvar = 'True') {
        $(".selectbox").addClass("opt1");
    }
    else if((document.getElementById('selector').value=='option2') && selectvar = 'True') {
        $(".selectbox").addClass("opt2");
    }
    else if((document.getElementById('selector').value=='option3') && slctspc = 'True') {
        $(".selectbox").addClass("opt3");
    }
});

这不起作用。我知道提供 jsfiddle 会很好，但是我的 Safari 浏览器太旧而无法运行小提琴（或阻止它）。我希望通过查看我的代码示例，问题仍然会变得清晰。感谢您的帮助！

编辑：纯 CSS 解决方案，例如使用“text-align: -webkit-center;”不适用于所有 Safari 版本——这就是我使用 JavaScript 的原因，它确实解决了问题。问题是将我的代码与“.on('change', function ()”结合起来

【问题讨论】：

text-align is not working on safari <select>的可能重复
不，不是重复的。这篇文章使用“文本对齐：-webkit-center;”在 CSS 中 - 我确实对此进行了测试，但它不起作用，也可以在这篇文章下方阅读。也许它适用于某些 Safari 版本，但绝对不适用于所有版本。 Javascript 是解决方案，因为我的第一个代码示例（带有 $(document).ready(function() {) 的代码示例确实有效。
您使用= 进行比较，但它是==。 jsfiddle.net/khrismuc/h2uyncov
谢谢 - 我会实施并测试它是否能解决问题。

标签： javascript jquery html css

【解决方案1】：

我清理了你的代码：

selectvar 现在是布尔值，不需要 if 语句

如果您要向父 div 添加类，则可能需要删除旧的类。这就是removeClass 正在做的事情。这可能是问题所在。

不需要混合 vanilla 和 jQuery，所以我使用 $(this).val() 并做了一些其他的小改动来清理它。

我还为每个选项添加了一个数据属性，这样就不需要一堆 if else if 语句。

<div class="selectbox">
    <select name="filter1" id="selector">
       <option data-class="opt1" value="option1">Jackets</option>
       <option data-class="opt2" value="option2">Shoes</option>
       <option data-class="opt3" value="option3">Trouseres</option>
    </select>
</div>


var selectvar = (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1);        

$("#selector").on("change", function () {
    $(".selectbox").removeClass().addClass("selectbox");

    if(selectvar) {
        $(".selectbox").addClass($(this).data("class"));
    }
});

【讨论】：