0

Есть бегунок, мне нужно чтобы данные с него шли в свойство css div созданного и он закруглялся, с обычным дивом все работает, но как я пробую это сделать сознанному диву не работает, подскажите, пожалуйста,в чем проблема.

$(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>

2
  • Логика такая,нажатому блоку присваивается класс selected и уже с ним ведется работа
    – zkolya
    Commented 29 апр. 2015 в 16:58
  • Используйте кнопку "Фрагмент кода" (Ctrl+M) для добавления кода. Сообщение должно быть самодостаточным, ссылки на JSFiddle и подобные ресурсы могут служить только дополнением.
    – Kyubey
    Commented 29 апр. 2015 в 17:09

1 ответ 1

0

За что я не люблю jQuery? Удобная вещь, но ненадежная.

 $("#slider-range").slider({
       ...  ,
    slide: function(event, ui) {

      ....

      document.getElementsByClassName('ui-slider-handle')[0].style.borderRadius=v+'px';

      ....
1
  • Большое спасибо,я правда только заменил ,на другой класс document.getElementsByClassName('selected')[0].style.borderRadius=v+'px'; А почему не работало,не подскажите?
    – zkolya
    Commented 29 апр. 2015 в 20:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.