배열의 모든 값을 업데이트하는 방법? -JS/Jquery

Question

li 태그를 클릭 할 때 배열을 업데이트하려고합니다. 나는 테스트를 해왔고, 테스트를 해왔고, 해결책을 찾을 수 없었다. 두 개의 탭이 있습니다. "만들기"탭에서 단락을 삽입 할 수있는 컨테이너를 열고 "홈"탭에서 "단락 선택"버튼이 포함 된 다른 컨테이너를 엽니 다.

문제

I는 두 번째 시간 동안 그것을 할 때 배열의 값을 갱신하지 않을 것이다. 즉, 탭 사이를 전환하고 선택 모드를 다시 선택/선택 취소하면 새 선택 항목이 업데이트되지 않고 처음부터 동일한 선택 항목이 표시됩니다.

나는 그것을 볼 수있는 예제를 만들었고, 이것을 수행하는 더 좋은 방법이 있다면 (내가 알고있는) 내 손님이된다. 링크는 다음 단락 아래에 있습니다.

지침

단락을 선택하기 위해서는, 먼저 즉석에서 생성되는 단락을 추가 할 필요가, 다음은 "선택 단락"버튼을 클릭 "홈"섹션로 전환, 선택 모드에서 "만들기"섹션으로 이동합니다. 선택/선택 취소하려면 단락을 클릭하십시오. 단락을 선택하면 "storeClass"배열에 jQuery - index()를 사용하여 위치를 저장합니다. 단락 선택을 완료하면 "확인"버튼을 클릭하여 선택 모드를 종료하고 "집"섹션으로 전환하지만 다른 단락을 만들고 "작성"탭을 클릭하고 단락을 만들고, "홈"탭으로 전환하고 선택 모드로 이동하여 다시 선택하고 탭 사이를 전환하면 처음 선택한 첫 번째 선택 만 보입니다. 여기

이 같은 예는 다음과 같습니다 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; 
    } 
}); 

는이 제공 바이올린에