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
    29 апр 2015 в 16:58
  • Используйте кнопку "Фрагмент кода" (Ctrl+M) для добавления кода. Сообщение должно быть самодостаточным, ссылки на JSFiddle и подобные ресурсы могут служить только дополнением.
    – Kyubey
    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
    29 апр 2015 в 20:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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