添加不同的ID到DIV使用相同的類

我想知道如何我可以添加不同的ID使用相同的類什麼即時嘗試做的是編輯每個人可拖動我需要的是生成一個不同的ID，所以我可以編輯每個可拖動我的ID = 「猴子」我需要的是ID = 「monkey1」 monkey2 EXC添加不同的ID到DIV使用相同的類

var z = 1; //value to make div overlappable 
 

 
$('#addText').click(function (e) { 
 
    /** Make div draggable **/ 
 
    $('<div />', { 
 
     class: 'ui-widget-content', 
 
     appendTo: '.container', 
 
     draggable: { 
 
      containment: 'parent', 
 
      start: function(event, ui) { 
 
       $(this).css('z-index', ++z); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 

 
$(document).on("dblclick", '.text', function() 
 
{ 
 
    $(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show(); 
 
}); 
 

 
$(document).on("click", ".edit_text", function() 
 
{ 
 
    return false; 
 
}); 
 

 

 
$(document).on("click", function() 
 
{ 
 
    var editingText = $('.edit_text:visible'); 
 
    if (editingText.length) 
 
    { 
 
     editingText.hide(); 
 
     editingText.closest('.item').find('.text').text($(editingText).val()).show(); 
 
    } 
 
}); 
 

 
ko.bindingHandlers.draggable={ 
 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
 
     $(element).draggable(); 
 
    } 
 
}; 
 

 
var vm=function(){ 
 
    var self=this; 
 
    self.items=ko.observableArray(); 
 
    self.textContent = ko.observable(''); 
 
    self.init=function(){ 
 
     self.items([]); 
 
    } 
 
    self.remove=function(item){ 
 
     console.log(item); 
 
     self.items.remove(item); 
 
    } 
 
    self.addNew = function() { 
 
     self.items.push(self.textContent()); 
 
     self.textContent(''); 
 
    } 
 
    self.init(); 
 
} 
 

 
ko.applyBindings(new vm());

<style>.item{ 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 0.5em; 
 
    background:yellow; 
 
    z-index: 1; 
 
    display:block; 
 
} 
 

 
.edit_text 
 
{ 
 
    display: none; 
 
} 
 

 
.fix_backround 
 
{ 
 
    background-color: transparent; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 2px solid; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 
</style>

<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea> 
 
<button data-bind="click: addNew">Generate New Div</button> 
 

 
<div class="container"> 
 
<div data-bind="foreach:items" class="fix_backround"> 
 
    <div id="monkey" href="#" class="item" data-bind="draggable:true,droppable:true"> 
 
     <span data-bind="click:$parent.remove">[x]</span><br/><br/> 
 
     <center><span class="text" data-bind="text:$data"></span></div><input class="edit_text"/></center> 
 
    </div> 
 
</div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet" 
 
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
    <link rel="stylesheet" 
 
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="/resources/demos/style.css">

來源

2016-05-14 fidel

增量索引每次添加一個項目並將其追加到新生成的DIV？ – Nirri

我該怎麼做？ – fidel

這裏有一個小提琴展示你怎麼可以這樣做：

https://jsfiddle.net/xtrinch/etjj8xnz/

它的主要部分是：

ko.bindingHandlers.draggable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).draggable(); 
     $(element).attr('id', 'monkey'+itemsAdded) 

     itemsAdded = itemsAdded + 1 
    } 
};

來源

2016-05-14 14:46:52 Nirri

希望你現在可以看到小提琴，我忘了公開:) – Nirri

添加不同的ID到DIV使用相同的類

回答

相關問題