Question

我有一个jquery范围滑块，我用它来为整个图像选择一定百分比的颜色，它可以根据用户决定使用的元素数量来设置动态数量的句柄。我试图在句柄本身显示滑块的每个单独手柄的百分比。我没有好好把这个拿出来，我希望得到一些帮助/方向。

我在网上找到了一些选择了“.ui-slider-handle”然后修改了文本的例子，但我似乎只能将其中一个或全部改为同一个文本。我也得到了滑块对象，然后得到了它的子节点，然后遍历了子节点并尝试更改每个子节点的文本值，但它从不更改它。有任何想法吗？

这不起作用：

myslider.slider({                    
  min: 0,
  max: 100,
  orientation: 'vertical',
  values: handles,
  slide: function( event, ui ) {
    var handleText = $(this)[0].children[0].text;
    handleText = "Test";
    console.log("val should be changed: ",handleText);

    //The below line works, however it changes them all to the same value                   
    //myslider.find("a.ui-slider-handle").text(ui.values);

  }
});

Answer 1

已编辑的回答：您可以使用each()做您想做的事（这是一个有效的jsFiddle）：

myslider.find("a.ui-slider-handle").each(function( index ) {
     $(this).text(ui.values[index]);
});

让我们分解一下：

myslider.find("a.ui-slider-handle") - 获取所有句柄对象，就像你现在正在做的那样。
.each(function( index ) { - 将一个函数应用于我们刚刚找到的每个元素，使用jQuery对象中的索引作为参数。 each()正在进行繁重的工作;更多信息here。
$(this).text(ui.values[index]); - 使此句柄的文本来自values对象的值，该对象与此句柄的index对应。
}); - 关闭商店。

这应该可以做到！

注意：myslider.find("a.ui-slider-handle").text(ui.values);无效，因为虽然它选择了所有正确的句柄，但它只为它们分配了一个值 - 您的values序列。您需要使用上述方法来分解values的内容并将它们分别应用于句柄。

如何更改单个jquery滑块手柄上的文本

1 个答案: