Question

Complete novice, trying to create a personalizable Bible, where users can cycle through alternate translations of individual words/phrases by clicking directly on said words/phrases. I know I probably need some sort of “for loop” in the function, but I want their preferences to be stored (as strings?) in cache and in user profile, so text should not reset to a default upon page load. Ideally I would have the alternate text options (“array”?) embedded in HTML, as below, while keeping the HTML as uncluttered as possible. JS would eventually be populated with thousands of IDs, probably several per verse of the Bible, so the more generalizable the script, the better. Thanks in advance!

<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

Use the data- attributes…

<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.