Repeat loop on id

Question

As you can see in the code below, the only things that change is the number at the end of the id, example: (#slide_titulo1, #slide_titulo2...). I would like to know how to create a loop of repetition up to 10 and add to the end of the #slide_titulo, so you don’t have to keep giving Ctrl c + Ctrl v.

        $(document).ready(function() {
        //slide 1
            $('#tituloSlideInput1').on('change', function() {
                var value = $(this).val();
                $('#slide_titulo1').text(value);
            })
            $('#textoSlideInput1').on('change', function() {
                var value = $(this).val();
                $('#slide_texto1').text(value);
            })
            //slide 1

            //slide 2
            $('#tituloSlideInput2').on('change', function() {
                var value = $(this).val();
                $('#slide_titulo2').text(value);
            })
            $('#textoSlideInput2').on('change', function() {
                var value = $(this).val();
                $('#slide_texto2').text(value);
            })
            //slide 2

            //slide 3
            $('#tituloSlideInput3').on('change', function() {
                var value = $(this).val();
                $('#slide_titulo3').text(value);
            })
            $('#textoSlideInput3').on('change', function() {
                var value = $(this).val();
                $('#slide_texto3').text(value);
            })
            //slide 3


        })

Answer 1

You don’t even need to loop, just use the two selectors to pick the beginning of id’s, and then separate the alphabetical part of the numeric part and know which element to send the text to:

$('[id^=tituloSlideInput], [id^=textoSlideInput]').on('change', function(){
   var n = this.id.replace(/[a-zA-Z]+/, ''); // parte numérica do id
   var l = this.id.replace(/\d+/, ''); // parte alfabética do id
   var value = this.value;
   $('#slide_'+ (l == 'tituloSlideInput' ? 'titulo' : 'texto') +n).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select id="tituloSlideInput1">
   <option value="a">1</option>
   <option value="b">2</option>
</select>
<select id="textoSlideInput1">
   <option value="c">1</option>
   <option value="d">2</option>
</select>
<br>
<span id="slide_titulo1"></span>
<span id="slide_texto1"></span>
<br><br>
<select id="tituloSlideInput2">
   <option value="e">1</option>
   <option value="f">2</option>
</select>
<select id="textoSlideInput2">
   <option value="g">1</option>
   <option value="h">2</option>
</select>
<br>
<span id="slide_titulo2"></span>
<span id="slide_texto2"></span>

Answer 2

Just create a bond for for a variable i which lasts from 1 to 10 by adding i to the common text of each selector.

$(document).ready(function() {              
        for(var i = 1; i <= 10; i++){

            $('#tituloSlideInput' + i).on('change', function() {
                var value = $(this).val();
                $('#slide_titulo' + i).text(value);
            })

            $('#textoSlideInput' + i).on('change', function() {
                var value = $(this).val();
                $('#slide_texto' + i).text(value);
            })

       }
})

Answer 3

See if something like this helps.

for(let i = 1; i <= 10; i++){
      $('#tituloSlideInput'+i).on('change', function() {
                var value = $(this).val();
                $('#slide_titulo1').text(value);
            })
      //Ou
     $(`#tituloSlideInput${i}`).on('change', function() {
                var value = $(this).val();
                $('#slide_titulo1').text(value);
            })

}

Answer 4

Using a simple for():

for(var i = 1; i <= 10; i++){
    $('#tituloSlideInput'+i).on('change', function() {
        var value = $(this).val();
        $('#slide_titulo1'+i).text(value);
    })
    $('#textoSlideInput'+i).on('change', function() {
        var value = $(this).val();
        $('#slide_texto'+i).text(value);
    });
}