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

Question

请帮帮我。在Foundation6和jQuery中，我不能使用addClass()，也不能在滑块发生变化时做任何事情。帮帮我。我想在滑块的值发生变化时使用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元素

<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');
    });