Question

这是使用JQuery UI to convert radio buttons into slider elements的后续行动。我已经创建了一个新问题，因为我需要做的事情与原文有点不同，所以如果问题被认为是重复的并且应该被关闭，那么道歉。

您可以在jsFiddle和

中看到我尝试做的事情

$('.question').each(function() {
var qid = $(this).parent().attr('id');
var radios = $(this).find(':radio').hide();
$('.slider').slider({
    min: parseInt(radios.first().data('value'), 10),
    max: parseInt(radios.last().data('value'), 10),
    slide: function(event, ui) {
        radios.filter('[data-value=' + ui.value + ']').click();
    }
});
});

$('button').click(function() {
    alert($(':radio:checked').map(function() { return this.name + ': '+  this.value; }).get());;
});

我遇到了一些问题：

我有多组单选按钮，我需要在发布表单时为所有这些按钮传递正确的值。

目前，只有最后一个问题是传递正确的值，前两个正在传递默认的选中值（我必须将选中的属性添加到第一个单选按钮，因为如果另一个选项不是＆＃39 ; t被选中，根本没有传递该问题的值。
手柄也存在定位问题，特别是对于最后一个位于100％位置的物品，将其放在容器外面。它实际上在小提琴中看起来比在我的本地页面看起来更糟糕，因为它只是最后一个不完整的项目。

我想知道是否可以将一个类分配给与其位置相关的句柄，这样我就可以将最后一个从100％拖回来。

Answer 1

这里有两个不同的问题，所以让我们解决每个问题。

首先是JavaScript，问题是radios的范围。由于它在所有滑块之间共享，因此它始终设置为您设置的最后一个参考，这就是为什么您只看到第三个滑块具有值 - 每个滑块更改正在设置最后一个滑块的复选框。我们可以通过引用我们想要相对改变的内容来解决这个问题，例如：

slide: function(event, ui) {
  $(this).closest('.question').find('[data-value=' + ui.value + ']').click();
}

样式问题有点复杂，宽度和边距的组合搞乱了滑块的计算 - 你需要调整四周但是去掉边距并对齐宽度90 ％上升水平是最大的影响。你需要：

在width: 90% margin: 0 5%;

.round

删除margin: 0 0 0 2em;

.ui-slider-horizontal

移除.ui-slider-horizontal上的边框以使其看起来正确 - 如果您还需要.round级别，请在ol .round { background-color: #e6e6e6; border-radius: 16px; margin: 0 0 0.5em; width: 90%; margin: 0 5%; } .ui-slider-horizontal { background: transparent; border-radius: 1em; border: none; height: 2em; width: 90%; }级别添加边框

他们现在看起来像这样：

{{1}}

我还对小提琴中的滑块手柄进行了其他调整，以使其更合适（我认为）。

您可以在此处一起测试更改：http://jsfiddle.net/xs3GL/29/

JQuery UI将多组单选按钮转换为滑块

1 个答案: