jquery - jQuery Mobile addClass 不影响样式

Question

我在 jQuery Mobile 中使用 addClass 函数。我可以在代码中看到该类已添加，但应应用到它的样式被忽略了。

如果我将类添加到 html 并刷新页面，则该类是样式化的。所以在我看来，这可能与 JQM 如何呈现页面有关。

    $('.slider1').click(function(){
        $('.sliders').addClass('.slidersPosTwo');
    });

Answer 1

查看以下文档.addClass()：http ://api.jquery.com/addClass/

请注意示例如何省略.了类名开头的句点 ( )。如果您离开句点，那么它将作为类名的一部分添加，仅应用作选择器。

如果您进行此更改，您的代码将起作用：

...
$('.sliders').addClass('slidersPosTwo');//notice, no period before the class name
...

Answer 2

以编程方式修改 JQM 内容后，您通常需要刷新增强功能。例如，这可以通过$(".slider").slider("refresh");. 此外，增强后的元素在增强后具有完全不同的结构（例如，为单个滑块添加了许多新的 DOM 元素）。可能是您没有将类添加到正确的 DOM 元素（除非您设置 jsfiddle 或类似元素，否则无法验证这一点）。

Answer 3

代替 ：

    $('.sliders').addClass('.slidersPosTwo');

和：

    $('.sliders').addClass('slidersPosTwo');

更好的是，在这里您可以找到一个实时的 jsFiddle 示例，如何修改每个滑块元素。例如：

// Slider label
$('div[data-role="fieldcontain"] label#slider-label').addClass('custom-slider-label');
// Slider text box
$('div[data-role="fieldcontain"] input#slider').addClass('custom-slider');
// Slider element
$('div[data-role="fieldcontain"] div[role="application"]').addClass('custom-slider-element');
// Slider button
$('div[data-role="fieldcontain"] div[role="application"] a span').addClass('custom-slider-button');