在 JQuery 滑块句柄上放置字符

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/