如何更新數組中的所有值？ -JS/Jquery

Question

我試圖在點擊li標籤時更新數組。我一直在測試，測試，並且無法提出解決方案。 我有兩個選項卡：「創建」選項卡打開一個允許插入段落的容器，「主頁」選項卡打開另一個包含「選擇段落」按鈕的容器。

問題

，當我第二次做它不會更新數組的值。即，如果我在選項卡之間切換並再次選擇模式以選擇/取消選擇，它將不會更新新的選擇，而是從第一次獲得相同的選擇。

我創建了一個例子，所以你可以看看它，如果有更好的方法來完成這個（我知道有這個），那麼我的客人。鏈接在下一段落之下。

說明

爲了選擇一個段落，首先你需要添加這是動態創建一個段落，然後切換到「家庭」欄目，點擊「選擇項」按鈕，這會將您帶到選擇模式的「創建」部分。要選擇/取消選擇，請單擊任何段落。當你選擇一個段落時，它使用jQuery - index（）在「storeClass」數組中存儲它的位置。一旦你完成選擇段落，然後你通過點擊「確定」按鈕退出選擇模式，並切換到「家庭」部分，但假設你想創建另一個段落，然後點擊「創建」選項卡，創建段落，切換到「主頁」選項卡，進入選擇模式並再次選擇並在標籤之間切換，您將只看到您第一次進行的第一次選擇。

這裏是相同的例子：http://jsfiddle.net/7mbhnvas/8/

HTML

<ul class="tab"> 
<li><a class="paragraph-tab">Create</a></li> 
<li><a class="select-tab">Home</a></li> 
</ul> 
<div class="wrap"> 
    <div class="create-para-cont"> 
     <h3>Create a paragraph</h3> 
     <ul class="para-results"> 
      </ul>   
     <div class="para-tool"> 
      <p><textarea class="textarea"></textarea></p> 
      <button type="button" class="create-para-button">Create paragraph</button> 
      <div> 
       <button type="button" class="select-ok-button">OK</button> 
      </div> 
     </div> 
    </div> 
    <div class="select-para-cont"> 
     <h3>Select Mode</h3> 
     <p><button type="button" class="select-para-button">Select paragraph</button></p> 
    </div> 
</div> 

的jQuery

$('ul.tab li a:first').addClass('tab-active'); 
$('.create-para-cont').addClass('cont-active'); 

$('.create-para-button').on('click', function(){ 
$('.create-para-cont').addClass('cont-active'); 
var parent = $('.para-results'); 
var child = $('<li></li>'); 
var p = $('<p></p>'); 
var textarea = $('.textarea').val(); 
if($('.create-para-cont').hasClass('cont-active')){ 

     p.text(textarea); 
     child.append(p); 
     parent.append(child);   
} else { 
    return false 
} 
}); 
var storeClass = []; 
$('.select-para-button').on('click', function(){ 
$('.create-para-cont').addClass('cont-select'); 
if($('.para-results li').length >= 1){ 

    $('.textarea, .create-para-button').hide(); 
    $('.select-para-cont').hide(); 
    $('.select-tab').removeClass('tab-active'); 
    $('.create-para-cont').show(); 
    $('.paragraph-tab').addClass('tab-active'); 
    $('.select-ok-button').show(); 

    for (var i = 0; i < storeClass.length; i = i + 1) {  
     $('.para-results').each(function(index) { 
      $(this).find("li:eq("+ storeClass[ i ] +")").addClass('p-selected'); 

     }); 
    }   

} 
}); 
$('ul.tab li').on('click','a', function(){ 
if($(this).hasClass('paragraph-tab')){ 
    $('.para-results').children('li').removeClass('p-selected'); 
    $('.select-para-cont').hide(); 
    $('.select-tab').removeClass('tab-active'); 
    $('.create-para-cont').show(); 
    $('.paragraph-tab').addClass('tab-active'); 
} else { 
    $('.create-para-cont').removeClass('cont-active'); 
    $('.create-para-cont').hide();  
    $('.paragraph-tab').removeClass('tab-active'); 
    $('.select-para-cont').show(); 
    $('.select-tab').addClass('tab-active'); 
} 
}); 
$('ul.para-results').on('click','li', function(){ 
if($('.create-para-cont').hasClass('cont-select')){ 
    $(this).toggleClass('p-selected'); 
    var selected = $('.p-selected ');   
    var pSelected = selected.parent().children().index(this); 
    storeClass.push(pSelected);   
} else { 
    return false; 
} 
}); 
$('.select-ok-button').on('click', function(){ 
if($('.create-para-cont').hasClass('cont-select')){ 
    $('.create-para-cont').removeClass('cont-select'); 
    $('.create-para-cont').removeClass('cont-active'); 
    $('.create-para-cont').hide();  
    $('.paragraph-tab').removeClass('tab-active'); 
    $('.select-para-cont').show(); 
    $('.select-tab').addClass('tab-active'); 

} 
}); 

Answer 1

我會重置storeClass到空白陣列當 'OK' 按鈕是點擊，然後重新推入所有正確的值相同的點擊處理程序：

$('.select-ok-button').on('click', function(){ 
    if($('.create-para-cont').hasClass('cont-select')) { 
     storeClass = []; // make it blank 
     $('.p-selected').each(function() { 
      storeClass.push($(this).index()); // push each one into the array 
     }); 
     .... 
    } 
}); 

那麼你的ul.para-resultsclick處理程序應該是這樣的：

$('ul.para-results').on('click','li', function(){ 
    if($('.create-para-cont').hasClass('cont-select')){ 
     $(this).toggleClass('p-selected'); 
    } else { 
     return false; 
    } 
}); 

下面是您提供的提琴更新Fiddle