Jquery Jquery-UI Range Slider .each（function（）{}）;不能正常缓慢运行

Question

我想编写一个jquery函数，该函数查找每个.arti-carousel-ui-slider div并创建一个jquery ui范围滑块。它确实不能很好地工作。第二个滑块对象工作正常，但在第一个滑块中，它没有更改值。

这里是代码：

<div class="column col-xl-6 col-lg-6 col-md-6 col-sm-12"> //PHP Code First Element
<div class="arti-carousel-ui-slider">
<label for="arti_carousel_tab_items_distance">'.__('Distance Carousel-Items', 'arti-carousel').'</label>
<input type="hidden" name="arti_carousel_tab_items_distance" value="'.esc_html(get_post_meta($post->ID, 'arti_carousel_tab_items_distance', true)).'">
<div class="arti-carousel-ui-slider-slidebar" data-value="20" data-max="120" data-step="5"></div>
<p>'.__('The space between the Carousel-Items in px: ', 'arti-carousel').'<span class="slider-value"></span></p>
</div>                                    
</div> 

<div class="column col-xl-6 col-lg-6 col-md-6 col-sm-12"> //PHP Code Second Element
<div class="arti-carousel-ui-slider">
<label for="arti_carousel_tab_formattings_items_headline_fontsize">'.__('Headline Font-Size Carousel Item', 'arti-carousel').'</label>
<input type="hidden" name="arti_carousel_tab_formattings_items_headline_fontsize" value="'.esc_html(get_post_meta($post->ID, 'arti_carousel_tab_formattings_items_headline_fontsize', true)).'">
<div class="arti-carousel-ui-slider-slidebar" data-value="18" data-max="50" data-step="1"></div>
<p>'.__('The Font-Size is set to: ', 'arti-carousel').'<span class="slider-value"></span></p>
</div>
</div>


//JavaScript Code
jQuery(document).ready(function ($) {
var countslide = 0;
 $(".arti-carousel-ui-slider").each(function(){
        countslide = countslide + 1;
        $(this).attr("data-id",countslide);
        $(this).find( '.slider-value' ).attr("data-id",countslide);
        $(this).find('.arti-carousel-ui-slider-slidebar').attr("data-id",countslide);
        $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').slider(
            {
                value:$('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-value"),
                min: 0,
                max: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-max"),
                step: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-step"),
                slide: function( event, ui ) {
                    $( '.slider-value[data-id='+countslide+']' ).html( ui.value+'px' ),
                    $( '.arti-carousel-ui-slider[data-id='+countslide+'] input' ).val(ui.value+'px')
                }
            }
        );
        $(this).find( '.slider-value[data-id='+countslide+']').html(  $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').slider('value')+'px' );
    });
});

Answer 1

我已经找到解决方法：

$('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').slider(
        {
            value:$('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-value"),
            min: 0,
            max: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-max"),
            step: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-step"),
            slide: function( event, ui ) {

                $(this).parent().find('.slider-value').html( ui.value+'px' ),
                $(this).parent().find('input' ).val(ui.value+'px')

            }
        }
    );