0

我有一个 jquery 范围滑块，我用它来选择整个图像的颜色百分比，它可以根据用户决定使用多少元素而具有动态数量的句柄。我正在尝试在手柄本身中显示滑块的每个单独手柄的百分比。我没有运气解决这个问题，我希望能得到一些帮助/指导。

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

这不起作用：

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

  }
});
4

1 回答 1

1

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

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

让我们分解一下：

  1. myslider.find("a.ui-slider-handle")- 获取所有的句柄对象，就像你现在正在做的那样。

  2. .each(function( index ) {- 对我们刚刚找到的每个元素应用一个函数，使用它在 jQuery 对象中的索引作为参数。 each()是什么在做繁重的工作；更多关于它的信息。

  3. $(this).text(ui.values[index]);- 使这个句柄的文本成为我们values对象中对应于这个句柄的值index。

  4. });- 关闭商店。

这应该够了吧！

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

于 2013-06-06T21:24:56.747 回答