3

Como podem ver no código abaixo, as únicas coisas que mudam é o número no final do id, exemplo: (#slide_titulo1, #slide_titulo2...). Gostaria de saber como poderia fazer para criar um laço de repetição até 10 e ir adicionando ao final do #slide_titulo, para não precisar ficar dando 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


        })

4 Respostas 4

3

Você nem precisa fazer laço, bastaria usar os dois seletores pegando o início dos id's, e depois separar a parte alfabética da parte numérica e saber para qual elemento enviar o texto:

$('[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>

1

Só criar um laço for para uma variável i que itere de 1 a 10 adicionando i ao texto comum de cada seletor.

$(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);
            })

       }
})
0

Veja se algo como isso ajuda.

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);
            })

}
0

Usando um simples 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);
    });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .