There is a slider, I need the data from it to go to the css div property created and it is rounded up, with the usual div, everything works, but how I try to do it consciously does not work, please tell me what the problem is.

$(document).ready(function() { var dname_id = 1; $("#btn2").click(function() { var dynDiv = $('<div>') .attr('id', 'div_' + dname_id++) .css({ 'width': '50px', 'height': '20px' }) .addClass('resize') .html(dname_id - 1); $('#container').append(dynDiv); //-------------------------------------------------------// dynDiv.resizable({ ghost: true }); dynDiv.draggable({ containment: 'parent' }); dynDiv.click(function() { $('.selected').removeClass('selected'); $(this).addClass('selected'); var tekdi = $(".selected").attr("id"); var img1 = "#" + tekdi; }); }); /*--------------------------------------------*/ var tekdi = $(".selected").attr("id"); var div = $("#" + tekdi); startVal = 5; $("#slider-range").slider({ range: "min", min: 0, max: 140, value: startVal, create: function(event, ui) { div.css('border-radius', startVal); }, slide: function(event, ui) { // console.log(ui.value) var v = ui.value; div.css('border-radius', v); $("#amount").val(v); $("#s").html(v); } }); }); 
 .resize { background-color: #29e; color: white; font-size: 20px; font-family: sans-serif; position: fixed; border: 2px solid; padding: 1px 1px; width: 100px; height: 100px; } #container { box-shadow: 4px 0px 18px -1px #0000ff; width: 700px; height: 500px; } .selected { border: 1px dotted black; /*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/ } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <button id="btn2">new div</button> <br/> <div id="container"></div> <div id="c"></div> <div id="slider-range"></div> <p> <label for="amount">Максимальная цена:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> </br>

  • The logic is such that the selected class is assigned to the pressed block and work is already underway with it - zkolya
  • Use the "Code Fragment" button (Ctrl + M) to add a code. The message should be self-sufficient, links to JSFiddle and similar resources can only serve as a supplement. - Athari 5:09

1 answer 1

What I don't like jQuery for? Convenient thing, but unreliable.

  $("#slider-range").slider({ ... , slide: function(event, ui) { .... document.getElementsByClassName('ui-slider-handle')[0].style.borderRadius=v+'px'; ....
  • Thanks a lot, I really just replaced it with another class document.getElementsByClassName ('selected') [0] .style.borderRadius = v + 'px'; And why did not work, do not tell me? - zkolya