使用 JQuery UI 滑块更改 div 宽度

Question

我正在尝试使用滑块动态更改 div 的宽度。我使用点击功能获取元素 ID。然后我将这个 ID 传递给一个变量。我使用此变量来确定要调整的元素 ID 除了最后一行，一切正常。没有任何反应，也没有错误。

再澄清一点，在 JS fiddle 中拖动时会更新所选元素。我如何将该元素带入滑块以调整其宽度？我尝试获取元素的 id 属性并将其存储在全局变量中，然后在滑块中调用该变量并更新其 CSS。 JSFiddle

更新：解决了！我应该在所选元素上添加 class 而不是尝试将其存储在变量中。 var divHolder // 保存来自点击函数的元素

$('#changeWidth').slider({
    value: 0,
    slide: function(event, slider) {

    var theSliderValue = slider.value + "%";
    alert(divHolder); // Returns the div id i wanted
    $("#divHolder").css("width", theSliderValue);
  }
});

Answer 1

这基本上就是您想要做的吗？

https://jsfiddle.net/02o6a583/3/

$('.slider').slider({
    values: [0, 100],
    slide: function(event, ui){
        $('.expand-me').css('width', ui.value + '%');
    } 
});

使用 JQuery UI 滑块更改 div 宽度

Changing div width using JQuery UI slider

html

javascript

css

jquery

width