Question

我有一个列表框，点击后，被删除和＆＃39; n＆＃39;生成相同类型的新列表框（当单击该列表框时，用户在提示时输入n）。这个过程是可重复的。

但是新生成的列表框的宽度不应该与原始列表框（单击以生成新列表框的那个）相同。如果原始列表框的宽度为＆＃39; 200px＆＃39;新生成的项目的宽度应为＆＃39;（200 / n）px＆＃39;。

此外，我希望新生成的列表框的位置（目标）位于 SAME 位置作为点击的位置，即不是在整个列表之后（追加）或不在整个列表之前列表（前置），但只是与点击列表框的位置相同，一个接一个。（如上所述，它们的宽度减少了n）。抱歉，由于字数限制，我无法在标题中提及此内容。

我提到了其他建议使用After()，InsertAfter()等的答案，但我不知道如何在我的情况下实现它们，因为我是JavaScript和jQuery的新手。

HTML：

<h4>Rhythm-Ruler</h4>
<div>
   <ul class="list">
     <li></li>
   </ul>
</div>

JavaScript的：

$("ul").delegate("li", "click", function(){
   var inputNum = prompt("Divide By:"); 
                 // 'n' input by user and stored
   if(inputNum>1){
   $(this).remove();
    }

var i;
for (i=1;i<=inputNum;i++){
   var newList=document.createElement("li");
   $(".list").append($(newList).text(i));
               //this is making them assemble 'after' the entire list 
   $(this).css('width', 200/inputNum + 'px');
               //I am dividing the width by n but its not working
   }
});

CSS：

  li {
      /*position: fixed;*/
      float: left;
      list-style: none;
      width: 200px;
      height: 30px;
      box-shadow:0 -1px 1em hsl(60, 60%, 84%) inset;
      background-color: #FF7F50;
      display: inline;
      text-align: center;
      padding: 2px;
      }

的jsfiddle： https://jsfiddle.net/yoshi2095/gwpf42ds/6/

Answer 1

更新了工作示例。

https://jsfiddle.net/z90hg3z5/

$("ul").delegate("li", "click", function()
{
   var inputNum = prompt("Divide By:");
   if(inputNum>1){
       var i;
       var w = $(this).width();
       $(this).remove();
       var newW = w/inputNum;
    }
    else 
    {
         newW = w;
    }
    for (i=1;i<=inputNum;i++)
    {
        var newList=document.createElement("li");
        $(".list").append($(newList).text(i));
        $(newList).css('width', newW);
    }
});

解释。您需要获取单击元素的宽度，以便您可以进行数学运算，将其除以输入数字。然后删除原始元素。

更新了在正确位置插入新元素的代码。

$("ul").delegate("li", "click", function()
{
    var inputNum = prompt("Divide By:");
    if(inputNum>1)
    {
         var i;
         var w = $(this).width();
         var newW = w/inputNum;
     }
     else 
     {
         newW = w;
     }
     for (i=1;i<=inputNum;i++)
     {
         var newList=document.createElement("li");
         $(newList).text(i).css('width', newW).insertAfter($(this));
     }
});

编辑代码格式

如何根据用户输入更改动态生成的列表框的宽度？

1 个答案: