대체 텍스트를 반복 클릭하십시오.

Question

완성 된 초보자가 개인화 가능한 성경을 만들려고합니다. 여기서 사용자는 상기 단어/구를 직접 클릭하여 개별 단어/구의 대체 번역을 반복 할 수 있습니다. 나는 함수에서 "for loop"와 같은 일종의 필요성을 알고 있지만, 캐시와 사용자 프로필에 그들의 환경 설정을 (문자열로) 저장하려고하므로 텍스트가 페이지로드시 기본값으로 재설정되지 않아야합니다. 이상적으로 HTML을 가능한 한 정리되지 않은 상태로 유지하면서 아래와 같이 HTML에 포함 된 대체 텍스트 옵션 ("array"?)을 갖게됩니다. JS는 궁극적으로 성경의 구절마다 수천 개의 ID로 채워질 것입니다. 미리 감사드립니다! 사용이 데이터 - 속성

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script> 
<script> 
$(document).ready(function() { 
    $('.alternate').click(function() { 
     $('#1Cor13-4a').text('[What goes here if I want to cycle through the options listed in HTML?]'); 
     $('#1Cor13-4b').text('[Ditto]'); 
    }); 
}); 
</script> 

My <span class="alternate" id="1Cor13-4a" onclick="ChangeText({"care","love"})">love</span><span class="alternate" id="1Cor13-4b" onclick="ChangeText({"is patient with","suffers long for"})">is patient with</span> you. 

Answer 1

...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script> 
<script> 
$(document).ready(function() { 
$('.alternate').click(function() { 
     var index= $(this).attr("data-text-index"); 
    var text = $.parseJSON($(this).attr("data-text")); 
    if(index== null) 
     index = -1; 
    index = Number(index)+1>=text.length? 0:Number(index)+1; 
    $(this).html(text[index]); 
    $(this).attr("data-text-index",index); 
    }); 
}); 
</script> 
My <span class="alternate" id="1Cor13-4a" data-text='["care","love"]'>love</span><span class="alternate" id="1Cor13-4b" data-text='[" is patient with"," suffers long for"]'> is patient with</span> you.