javascript - 如何更新数组中的所有值？ -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 重置为空白数组，然后在同一单击处理程序中将所有正确的值重新插入其中:

$('.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-results 的 click 处理程序将如下所示:

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

这是更新的 Fiddle