Javascript 如何在文本框中显示可拖动的div宽度

我有一些可拖动的div，每个div都有一个文本框来显示该div的宽度，我不知道如何显示它。这里，脚本用于拖动脚本变量p中的div，并在拖动后存储div宽度 我该怎么做

$（函数（）{
var container=$（'.middletablediv'），
base=null，
句柄=$（'.handle'），
IsResising=false；
handle.on（'mousedown'，函数（e）{
基数=$（this）.closest（“.timescalebase”）；
IsResising=true；
lastDownX=e.clientX；
});
$（文档）.on（'mousemove'，函数（e）{
//如果不调整大小，我们什么都不想做。
如果（！IsResising）
返回；
var p=（e.clientX-base.offset（）.left）；
base.css（'width'，p）；
}).on（'mouseup'，函数（e）{
//停止调整大小
IsResising=false；
});
美元（“#宽度1”）.val（“p”）；
})

.activelevel1{
背景色：红色；
}
.timescalebase{
边缘顶端：13px；
高度：7px；
位置：相对位置；
宽度：200px；
高度：5px；
}
.处理{
位置：绝对位置；
右：0；
排名：0；
底部：0；
宽度：8px；
光标：w-调整大小；
背景色：黑色；
}

---

首先从HTML中删除重复的ID。在HTML中应该始终具有唯一的ID。您不止一次拥有“StartValue 1”。还要注意的是，我为每个

都分配了一个ID，该ID的前缀源自滑块的

。通过这种方式，我可以轻松地访问我想要的内容，而不用担心以后添加的HTML会干扰我的代码

<div id="container" style="width:100%;margin-top:25px;">
  <div id="timebase1" class="timescalebase activelevel1">
      <div class="handle"></div>
  </div>
  <input id="timebase1_value" type="text" name="number" value="200" min="1" >

  <div id="width1" class="timescalebase activelevel1">
      <div class="handle"></div>
  </div>
  <input id="width1_value" type="text" name="number" value="200" min="1" >

  <div id="width2" class="timescalebase activelevel1">
      <div class="handle"></div>
  </div>
  <input id="width2_value" type="text" name="number" value="200" min="1" >

  <div id="timebase4" class="timescalebase activelevel1">
      <div class="handle"></div>
  </div>
  <input id="timebase4_value" type="text" name="number" value="200" min="1" >
</div>

我也移除了被遗忘的记忆

$("#width1").val("p");

你在那里吃过

 $(function () {
     var container = $('.middletablediv'),
         base = null,
         handle = $('.handle'),
         isResizing = false;

     handle.on('mousedown', function (e) {
         base = $(this).closest(".timescalebase");
         isResizing = true;
         lastDownX = e.clientX;
     });

     $(document).on('mousemove', function (e) {
         // we don't want to do anything if we aren't resizing.
         if (!isResizing)
             return;

         var p = (e.clientX - base.offset().left);
         jQuery('#' + base[0].id + '_value').val(p);

         base.css('width', p);

     }).on('mouseup', function (e) {
         // stop resizing
         isResizing = false;

     });
 });

---

如果坚持按开始的方式执行，则必须在

mousedown

上以变量形式传递当前目标，然后使用该

currentTarget

var来

mousemove

然后根据该目标设置输入值。

currentTarget.parent（）.next（'input'）.val（p）


$（函数（）{
var container=$（'.middletablediv'），
base=null，
句柄=$（'.handle'），
IsResising=false，
当前目标；
handle.on（'mousedown'，函数（e）{
基数=$（this）.closest（“.timescalebase”）；
IsResising=true；
lastDownX=e.clientX；
currentTarget=$（e.target）
});
$（文档）.on（'mousemove'，函数（e）{
//如果不调整大小，我们什么都不想做。
如果（！IsResising）
返回；
var p=（e.clientX-base.offset（）.left）；
base.css（'width'，p）；
currentTarget.parent（）.next（'input'）.val（p）；
}).on（'mouseup'，函数（e）{
//停止调整大小
IsResising=false；
});
美元（“#宽度1”）.val（“p”）；
})
.activelevel1{
背景色：红色；
}
.timescalebase{
边缘顶端：13px；
高度：7px；
位置：相对位置；
宽度：200px；
高度：5px；
}
.处理{
位置：绝对位置；
右：0；
排名：0；
底部：0；
宽度：8px；
光标：w-调整大小；
背景色：黑色；
}
既然有很多像样的滑块，为什么还要重新发明轮子呢。
 $(function () {
     var container = $('.middletablediv'),
         base = null,
         handle = $('.handle'),
         isResizing = false;

     handle.on('mousedown', function (e) {
         base = $(this).closest(".timescalebase");
         isResizing = true;
         lastDownX = e.clientX;
     });

     $(document).on('mousemove', function (e) {
         // we don't want to do anything if we aren't resizing.
         if (!isResizing)
             return;

         var p = (e.clientX - base.offset().left);
         jQuery('#' + base[0].id + '_value').val(p);

         base.css('width', p);

     }).on('mouseup', function (e) {
         // stop resizing
         isResizing = false;

     });
 });