Question

我在点击li标签时尝试更新数组。我一直在测试，测试，无法提出解决方案。我有两个标签：＆＃34;创建＆＃34;选项卡打开一个容器，允许您插入段落，＆＃34; Home＆＃34;选项卡打开另一个容器，其中包含＆＃34;选择段落＆＃34;按钮。

问题

第二次执行此操作时，它不会更新数组的值。即，如果我在选项卡之间切换并再次进入选择模式以选择/取消选择，它将不会更新新选择，而是从第一次获得相同的选择。

我已经创建了一个示例，因此您可以查看它，如果有更好的方法来实现这一点（我知道有），那么请成为我的客人。链接位于下一段之下。

说明

要选择一个段落，首先需要添加一个即时创建的段落，然后切换到＆＃34; Home＆＃34;部分，点击＆＃34;选择段落＆＃34;按钮，这将带您进入＆＃34;创建＆＃34;关于选择模式的部分。要选择/取消选择，请单击任何段落。当你选择一个段落时，它会使用jQuery - index（）在＆＃34; storeClass＆＃34;中存储它的位置。阵列。完成选择段落后，单击＆＃34;确定＆＃34;退出选择模式。按钮，它切换到＆＃34; Home＆＃34;部分，但是让我们说你要创建另一个段落，然后点击＆＃34;创建＆＃34;选项卡，创建段落，切换到＆＃34; Home＆＃34;选项卡，进入选择模式并再次选择并在标签之间切换，您将看到您第一次选择的第一个选项。

以下是相同的示例：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
        });
        ....
    }
});

然后click的{{1}}处理程序将如下所示：

ul.para-results

这是更新后的Fiddle

如何更新数组中的所有值？ -JS / jQuery的

1 个答案: