如何在滑块手柄移动时在Foundation 6范围滑块上添加类

Question

请帮我。 使用Foundation 6和jQuery时，我无法使用addClass（）或在滑块更改时发生任何事情。 帮我。 我希望在滑块的值发生变化时添加类（），这样我就可以更改span元素的内容。 这就是我的代码：

<div class="slider" data-slider  data-initial-start="20" data-end="100" data-binding="true">
<span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2" data-start="0" data-end="10"></span>
<span class="slider-fill" data-slider-fill></span>
<input data-binding="true" type="hidden">
</div>

    <span class="damn" data-n="1">Hey</span>
    <span class="damn" data-n="2">Boo</span>
    <span class="damn" data-n="3">You OK?</span>

和jQuery：

 var stepsof = [1, 2, 3];
        $('input[type="hidden"]').on('change', function(){
            $(".slider").val(valMap[ui.values[0]]);
       $('span[data-n="' + $(this).val() + '"]');
           $('.damn').addClass('goat');


        });

Answer 1

因为很多人可能会碰到这个问题，所以我想分享一下这是如何完成的，因为我得到了我需要的帮助:)。

 <div class="slider" data-slider data-initial-start="1" data-end="3">
 <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="slider_value"></span>
<span class="slider-fill" data-slider-fill></span>


<input id="slider_value" type="hidden">
</div>

和跨度元素

<span class="selector-span great" data-n="1">First</span>
<span class="selector-span" data-n="2">Second</span>
<span class="selector-span" data-n="3">Third</span>

和jQuery

$('.slider').on('moved.zf.slider', function() {

    console.log($('#slider_value').val());
    $('.selector-span').removeClass('logoopen');
    $('.selector-span').removeClass('open');
    $('.selector-span[data-n="' + $('#slider_value').val() +'"]').addClass('open');
    });