在具有范围滑块的元素上添加或删除 class
Add or remove class on elements with range slider
我有一个使用范围滑块的脚本,它根据滑块的位置更改价格值和人数。用途是根据人数为办公室 space 定价。这是这支笔中的工作示例:
http://codepen.io/anon/pen/OXPvZO
使用滑块,有一些人物图标(示例中的黑色方块)旨在根据计数使用活动 class 突出显示。因此,当您滑过时,活动 class 将应用于适当数量的图标或根据滑动方向移除。我无法确定处理此类操作的方法。
这是我用来处理现有内容的 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' );
});
});
需要注意的一件事(如 Codepen 中的 HTML 所示)是数据计数在 8 之后跳过两个。所以从 8 到 10 再到 12。这似乎与方法无关我以前试过。
如果有人有任何建议或方法我可以在这里使用,我将不胜感激。
它跳过的原因是因为您在数据滑块计数中缺少 9 和 11。因为您使用了循环来生成元素,所以它无法在更改的事件中找到带有 class '.person-11' 或 '.person-9' 的元素。
您可以按照下面的代码从 data-slider-count 中获取实际值,并使用它们生成将基于 data.count 找到的跨度元素。
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');
});
});
我有一个使用范围滑块的脚本,它根据滑块的位置更改价格值和人数。用途是根据人数为办公室 space 定价。这是这支笔中的工作示例:
http://codepen.io/anon/pen/OXPvZO
使用滑块,有一些人物图标(示例中的黑色方块)旨在根据计数使用活动 class 突出显示。因此,当您滑过时,活动 class 将应用于适当数量的图标或根据滑动方向移除。我无法确定处理此类操作的方法。
这是我用来处理现有内容的 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' );
});
});
需要注意的一件事(如 Codepen 中的 HTML 所示)是数据计数在 8 之后跳过两个。所以从 8 到 10 再到 12。这似乎与方法无关我以前试过。
如果有人有任何建议或方法我可以在这里使用,我将不胜感激。
它跳过的原因是因为您在数据滑块计数中缺少 9 和 11。因为您使用了循环来生成元素,所以它无法在更改的事件中找到带有 class '.person-11' 或 '.person-9' 的元素。
您可以按照下面的代码从 data-slider-count 中获取实际值,并使用它们生成将基于 data.count 找到的跨度元素。
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');
});
});