使用范围滑块在元素上添加或删除类
提问于 2016-06-01 09:37:45
我有一个使用范围滑块的脚本，它根据滑块的位置改变价格值和人员数量。其用途是根据人数来确定办公空间的价格。下面是这支笔的工作示例：
http://codepen.io/anon/pen/OXPvZO
有了滑块，就会有人物图标(示例中的黑色块)，这些图标将根据计数使用活动类突出显示。因此，当您滑过时，活动类将应用于适当的图标计数或删除取决于幻灯片方向。我很难确定处理这类操作的方法。
下面是我现在用来处理的JS：
jQuery( function( $ ) {
var personCount = 12;
for ( i = 0; i < personCount; i++ ) {
$( '.person-count' ).append( '<span class="person person-' + i + '" />' );
};
$( '[data-slider]' ).on( 'slider:ready slider:changed', function( event, data ) {
$( this ).parents( '.price-slider' )
.find( '.person-integer' ).html( data.count ).end()
.find( '.js-price' ).html( data.value ).end()
.find( '.person-' + data.count ).addClass( 'is-active' );
});
});需要注意的一件事(如代码中的HTML中所示)，数据计数在8之后跳过2，所以从8跳到10到12，这似乎抛弃了我之前尝试过的方法。
如果有人在这里有任何建议或方法，我会非常感激的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-01 10:17:00
它跳过的原因是因为在数据滑块计数中丢失了9和11。因为您使用了一个循环来生成元素，所以在更改事件中找不到类‘..person 11’或‘.Per-9’的元素。
您可以按照下面的代码从数据滑块计数中获得实际值，并使用它们生成基于data.count的span元素。
jQuery(function($) {
//get values from slider
var personCounts = $('.slider-input').attr('data-slider-count').split(',');
//Create span elements based on values and not count
for (i = 0; i < personCounts.length; i++) {
$('.person-count').append('<span class="person person-' + personCounts[i] + '" />');
};
//these two should be active based on the default value of the slider
$('.person-1').addClass('is-active');
$('.person-2').addClass('is-active');
$('[data-slider]').on('slider:ready slider:changed', function(event, data) {
$('.person-integer').html(data.count);
$('.js-price').html(data.value);
$('.person-' + data.count).addClass('is-active');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37575366
复制
腾讯云开发者
