第二次尝试（仅限动态div）

Question

我很长一段时间没有使用过jQuery，我需要一些提醒来完成我的任务。

运行jQuery 1.7，我想在他各自的位置插入一个动态创建的div。我认为通过一个例子来解释更容易： https://jsfiddle.net/s9m3ge3e/

如果我们点击1,2和3，一切都很顺利。然后我删除2并再次重新单击2。我得到的是： 1 3 2。

我真正想要的是： 1 2 3

总结一下，我该选择什么而不是“追加”？

$("#container").append('<div id="text_'+num+'">'+ num + ' Added</div>')我不希望2被追加到最后，我希望他在1到3之间处于正确的位置。

编辑：还要注意解决方案应该是通用的。这次是3个“按钮”，但最终可能会成为4个等等

P.S：小提琴是我在现实生活中的抽象版本。忽略我编写的可怕代码以使其可视化，我知道它。只是想写一个我遇到的问题的快速例子。

由于

Answer 1

首先，我非常感谢你提出问题的方式所以+1，为此，新手应该采用从中提问的方式。

现在请原谅我的丑陋代码，但这就是我所能做的所有匆忙，我希望这就是你想要的。用以下代码替换你的js代码：

$(".btnAdd").on('click', addText);
var inserted = false;
function addText() {
  var num = this.id.substring(4);
  if($('#container div').length){
  var no_of_div = $('#container div').length;
  $('#container div').each(function(){
    var no = $(this).attr('id').split('_')[1];
    if(inserted)
    return;
    if(parseInt(no)<parseInt(num)){

                $('<div id="text_'+num+'">'+ num + ' Added</div>').insertAfter($(this));
        inserted=true;

    } 
    else{
       $('<div id="text_'+num+'">'+ num + ' Added</div>').insertBefore($(this));
    }
  });
  if($('#container div').length===no_of_div){
     $("#container").append('<div id="text_'+num+'">'+ num + ' Added</div>');
  }
  }
  else{
      $("#container").append('<div id="text_'+num+'">'+ num + ' Added</div>');
      }

  changeBtnToRemove(this.id);

  inserted = false;
}

function changeBtnToRemove(id) {
  var $id = $("#" + id);
  $id.text($id.text().replace('Add', 'Del'));
  $id.removeClass('btnAdd').addClass('btnRemove');
  $id.off().on('click', removeText);
}

function removeText() {
  var num = this.id.substring(4);
  $("#text_" + num).remove();

  var $id = $("#" + this.id);
  $id.text($id.text().replace('Del', 'Add'));
  $id.removeClass('btnRemove').addClass('btnAdd');
  $id.off().on('click', addText);
}

我在你的小提琴上制作了这个代码，所以很明显它对我有用。 我希望它有所帮助

Answer 2

好的，我们走了。

这是一个纯粹的jquery解决方案（带有一些CSS）：

$(document).ready(function(){

    $('button').click(function(){
        
        if ($('#container div').eq($('button').index(this)).attr('class') === 'hide') {
            $(this).text('Del ' + ($('button').index(this) + 1));
            $('#container div').eq($('button').index(this)).attr('class','show');
        }

        else {
            $(this).text('Add ' + ($('button').index(this) + 1));
            $('#container div').eq($('button').index(this)).attr('class','hide');
        }

    });

});

.hide {
display: none;
}

.show {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button">Add 1</button>
<button type="button">Add 2</button>
<button type="button">Add 3</button>
<button type="button">Add 4</button>
<button type="button">Add 5</button>

<div>
---------------------
<div id="container">
<div class="hide">1 Added</div>
<div class="hide">2 Added</div>
<div class="hide">3 Added</div>
<div class="hide">4 Added</div>
<div class="hide">5 Added</div>
</div>
</div>

第二次尝试（仅限动态div）

这是一种替代的纯jQuery方法，可以添加和删除动态div。

$(document).ready(function(){

    $('button').click(function(){
        
        if ($(this).text() === ('Add ' + ($('button').index(this) + 1))) {
            $(this).text('Del ' + ($('button').index(this) + 1));

            if ($('#container div').length === 0) {
                $('#container').append('<div class="show" data-index="' + $('button').index(this) + '">' + ($('button').index(this) + 1) + ' Added</div>');
            }

            else if ($('#container div[data-index="' + $('button').index(this) + '"').length > 0) {
                $('#container div[data-index="' + $('button').index(this) + '"').attr('class','show');
            } 
            
            else {
                var added = false;

                for (i = ($('#container div').length - 1); i >= -1; i--) {
                    if ((added !== true) && (i === -1)) {
                        $('#container').prepend('<div class="show" data-index="' + $('button').index(this) + '">' + ($('button').index(this) + 1) + ' Added</div>');
                        added = true;  
                    }

                    if ((added !== true) && ($('#container div').eq(i).attr('data-index') < $('button').index(this))) {
                        $('<div class="show" data-index="' + $('button').index(this) + '">' + ($('button').index(this) + 1) + ' Added</div>').insertAfter($('#container div').eq(i));
                        added = true;
                    }
                }
             }
          }

        else {
            $(this).text('Add ' + ($('button').index(this) + 1));
            $('#container div[data-index="' + $('button').index(this) + '"]').attr('class','hide');
        }

    });

});

.hide {
display: none;
}

.show {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<button type="button">Add 1</button>
<button type="button">Add 2</button>
<button type="button">Add 3</button>
<button type="button">Add 4</button>
<button type="button">Add 5</button>

<div>
---------------------
<div id="container">
</div>
</div>

Answer 3

由于这只是您实际问题的一个示例，我不确定我的答案是否适合您。

我处理这种问题的方法是管理一个json：

var items = [{id:1,text:"btn 1",isSelected:false},{id:2,text:"btn 2",isSelected:false},{id:3,text:"btn 3",isSelected:false}]

现在，当单击一个按钮时，我会将其id传递给该函数并更改json：

function addText(id)
{
    for(var count = 0;count<items.length;count++)
    {
        if(items[count].id == id){items[count].id = true; break;}
    }
    //Now I'll take the text for all selected buttons and add it to the div
    var text = "";
    for(var count = 0;count<items.length;count++)
    {
        if(items[count].isSelected ==tr
    }
}

Jquery - 将动态创建的div子项插入正确的位置

3 个答案:

第二次尝试（仅限动态div）