Question

我想要完成的是在我的JQuery滑块上使用fontawesome中的图标，所以我几乎试图将HTML代码插入到用作句柄容器的a中。

这是我的JavaScript

$(document).ready(function () {

    $(function () {
        $("#slider-vertical").slider({
            orientation: "vertical"
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });

    $('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');

});

这是所述滑块的HTML

<div id="slider-vertical" class="blue">zing</div>

奇怪的是我试图将滑块的外部部分作为目标

$('#slider-vertical.blue').append('<i class="fa fa-bars"></i>');

，我不明白为什么它不会把它放在处理程序中。

我期待这样的输出

<div id="slider-vertical" class="blue">
    <a class="slider-handle">
        <i class="fa fa-bars"></i>
    </a>
</div>

Answer 1

它确实添加了可见的元素。 http://jsfiddle.net/LZx5L/1/这是你的问题

 $('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');

没有a.slider-handle，它是a.ui-slider-handle

 $('#slider-vertical.blue a.ui-slider-handle').append('<i class="fa fa-bars"></i>');

但是，图标必须是<i>。将类添加到元素是最简单的解决方案。

$('#slider-vertical.blue a.ui-slider-handle').addClass('fa fa-bars');

http://jsfiddle.net/LZx5L/

在JQuery滑块手柄上放置字符

1 个答案: