JQuery用戶界面以單選按鈕的多組轉換爲滑塊

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

我有幾個問題：

1. 我已經有了多套廣播按鈕，並且我需要在表單發佈時傳遞正確的值。

   目前，只有最後一個問題是傳遞正確的值，因爲如果沒有選擇前兩個是通過將默認選中的值（我不得不選中的屬性添加到第一個單選按鈕的另一種選擇，根本沒有通過任何值的問題）。

2. 還有一個定位的問題與手柄，特別是對於其中它定位在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%; 
} 

我還做了其他的調整，以滑動手柄本身在撥弄，使之適合好一點（我認爲）。

您可以在這裏一起測試更改：http://jsfiddle.net/xs3GL/29/