Question

我的目标是使用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类“ selectbox”中-取决于在选择框中选择的值。然后，我可以使用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（）”“

结合起来

Answer 1

我清理了一些代码：

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

如果要将类添加到父div，则可能需要删除旧的类。这就是removeClass所做的。这可能是问题所在。

无需混合使用香草和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"));
    }
});

使用jQuery

1 个答案: