JQuery的 - 如何生成與生成的股利和<select>標籤

層次我必須做一些形式和產生與之格但在這裏，這不是我的問題。JQuery的 - 如何生成與生成的股利和<select>標籤

其實，我想知道如何創建這樣的事情發生的div之間的層次，主要演員將是<select>標籤。

這裏是我想什麼有一個形象。例如，當我創建一個章節並將其與我之前生成的Book 1相關聯時，則該章節附加在正確的「book」div內。或者另一個例子，如果我想創建一個特定的線塊。我希望它在正確的章節塊本身在正確的書籍塊。

我不知道我是不是很清晰和準確的，但這裏是我的小提琴實際代碼：https://jsfiddle.net/Uxrieg/hctr0xbh/16/

而且我目前jQuery腳本：

$("#select").change(function(){ 
    var val = $(this).val(); 
    $("#select-choice > div").hide(); 
    $("." + val).slideToggle(); 
}); 

    $('#createBook').click(function(){ 
    var listItem = $('#bookName').val(); 
    var clearButton = $('<button value="x" id="clear"></button>'); 
    //console.log(listItem); 
    $('#list').append('<div class= "BookName">' + listItem +'<input type=button class="item" value=X />' + '</div>'); 
    $('#bookName').val(' '); 
}); 

$('#createChapter').click(function(){ 
    var listItem = $('#chapterName').val(); 
    var clearButton = $('<button value="x" id="clear"></button>'); 
    //console.log(listItem); 
    $('#list').append('<div class= "ChapterName">' + listItem +'<input type=button class="item" value=X />' + '</div>'); 
    $('#chapterName').val(' '); 
}); 

$('#createLine').click(function(){ 
    var listItem = $('#lineName').val(); 
    var clearButton = $('<button value="x" id="clear"></button>'); 
    //console.log(listItem); 
    $('#list').append('<div class= "LineName">' + listItem +'<input type=button class="item" value=X />' + '</div>'); 
    $('#lineName').val(' '); 
}); 

$(document).on('click', '.BookName', function(){ 
    //console.log('clicked'); 
    $(this).remove(); 
}); 

$(document).on('click', '.ChapterName', function(){ 
    //console.log('clicked'); 
    $(this).remove(); 
}); 

$(document).on('click', '.LineName', function(){ 
    //console.log('clicked'); 
    $(this).remove(); 
});

感謝很多提前，如果你能解決我的問題或者只是幫助我。祝你有美好的一天！ =）

來源

2017-02-21 Uxrieg

你只需要改變的追加選擇調用章和行：

$('.BookName', '#list').append('<div class= "ChapterName">' + listItem +'<input type=button class="item" value=X />' + '</div>');

$('.ChapterName', '#list').append('<div class= "LineName">' + listItem +'<input type=button class="item" value=X />' + '</div>');

請記住，如果沒有書已經被創建，然後添加章節/行將不會執行任何操作，如果沒有創建章節，則添加行將不會執行任何操作。此代碼將在所有已打開的書籍或所有創建的章節中的新行中創建一個新章節。如果您需要更具體，那麼您需要添加更多邏輯並更改您的選擇器。

更多關於jquery選擇器在這裏：https://api.jquery.com/category/selectors/

來源

2017-02-21 16:08:48 artemisian

JQuery的 - 如何生成與生成的股利和<select>標籤

回答

相關問題