Блог

Используя некоторые примеры в javascript, я создал это с идеей, что при нажатии кнопки на веб-страницу добавляется новая строка, строка содержит раскрывающийся список, который изменит изображение в этой строке с событием onChange.

HTML:

 <button name="addDom" id="incrementor" type="button" class="btn btn-block btn-primary btn-lg"><i class="fa fa-plus-circle" aria-hidden="true"></i> Añadir pregunta</button>
 

JS Jquery:

 var number = 0;
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number  ;
  count.textContent = number.toString();
}

$(document).ready(function() {
       
    $("button[name='addDom']").click(function() {
        var domElement = $('<div class="row"><div class="col-md-9"><div class="box"><div class="box-header with-border"><h3 class="box-title">Pregunta ' number.toString() '</h3></div><div class="box-body"><div class="box box-solid"><div class="form-group"><label for="exampleInputEmail1">Selecciona el tipo de pregunta</label><select class="form-control input-lg" id="img_change' number.toString() '"><option value="5caritas">5 caritas</option><option value="3caritas">3 caritas</option><option value="2caritas">2 caritas</option><option value="opciones">Selección simple</option><option value="nps">Evaluación del 1 al 10</option><option value="texto">Texto libre</option><option value="telefono">Teléfono</option><option value="email">Correo electrónico</option></select></div><div class="form-group"><label for="exampleInputEmail1">Tu pregunta es: </label><input class="form-control input-lg" type="text" placeholder="Escribe tu pregunta"></div></div></div></div></div><div class="col-md-3"><div class="box box-default"><div class="box-header with-border"><i class="fa fa-bullhorn"></i><h3 class="box-title">Ejemplo:</h3></div><div class="box-body"><img class="img-responsive" id="changePictureYo' number.toString() '" src="https://easycsat.com/adminLib/clients/img/screenshot-5caritas.png"/></div></div></div></div>');
        $(this).before(domElement);
        
        $('#img_change' number.toString()).on('change', function(){

        var img_path = 'https://easycsat.com/adminLib/clients/img/screenshot-'   $(this).val()   '.png';
        $('#changePictureYo' number.toString()).attr( 'src', img_path );
});
    });
    
    
});
 

Это работает нормально, при нажатии кнопки добавляется новая строка, и я могу изменить изображение с помощью выпадающего списка.

пример:

1. При нажатии кнопки добавляется новая строка 1, а выпадающий список 1 изменяет изображение 1
2. При нажатии кнопки добавляется новая строка 2, а выпадающий список 2 изменяет изображение 2
3. При нажатии кнопки добавляется новая строка 3, а выпадающий список 3 изменяет изображение 3

Проблема в том, что когда я пытаюсь изменить изображение любой предыдущей строки (используя предыдущий пример), если я попытаюсь использовать выпадающий список 1 для изменения изображения 1, это действие изменит изображение последней строки, добавленной вместо изображения 1.

таким образом, все выпадающие списки изменяют только последнее добавленное изображение, а не изображение, принадлежащее этому выпадающему списку.

Вот рабочий пример: https://jsfiddle.net/lrunge/vupgz1rh/2/

Я попытался внести некоторые изменения в JS, как я уже говорил, я использовал разные примеры и адаптировал их к тому, что мне нужно, но есть кое-что, чего я не могу достичь из-за моих ограниченных знаний в JS

Заранее большое спасибо за всю вашу поддержку и руководство

Вы можете переместить все change событие за пределы click события .Затем внутри события изменения используйте $(this).closest(".row").find("img") для ссылки на тег img , в котором было изменено поле выбора.

Демонстрационный код :

 var number = 0;
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number  ;
  //count.textContent = number.toString();
}

$(document).ready(function() {
  $("button[name='addDom']").click(function() {
    var domElement = $('<div class="row"><div class="col-md-9"><div class="box"><div class="box-header with-border"><h3 class="box-title">Row '   number.toString()   '</h3></div><div class="box-body"><div class="box box-solid"><div class="form-group"><label for="exampleInputEmail1">Selecciona el tipo de pregunta</label><select class="form-control input-lg" id="img_change'   number.toString()   '"><option value="5caritas">5 caritas</option><option value="3caritas">3 caritas</option><option value="2caritas">2 caritas</option><option value="opciones">Selección simple</option><option value="nps">Evaluación del 1 al 10</option><option value="texto">Texto libre</option><option value="telefono">Teléfono</option><option value="email">Correo electrónico</option></select></div><div class="form-group"><label for="exampleInputEmail1">Tu pregunta es: </label><input class="form-control input-lg" type="text" placeholder="Escribe tu pregunta"></div></div></div></div></div><div class="col-md-3"><div class="box box-default"><div class="box-header with-border"><i class="fa fa-bullhorn"></i><h3 class="box-title">Image:</h3></div><div class="box-body"><img class="img-responsive" id="changePictureYo'   number.toString()   '" src="https://easycsat.com/adminLib/clients/img/screenshot-5caritas.png" style="max-width: 70px;"/></div></div></div></div><hr>');
    $(this).before(domElement);
  });
  //on change of select
  $(document).on('change', 'select[id*=img_change]', function() {
    var img_path = 'https://easycsat.com//adminLib/clients/img/screenshot-'   $(this).val()   '.png';
    //use closest and find..
    $(this).closest(".row").find('img').attr('src', img_path);
  });


}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button name="addDom" id="incrementor" type="button" class="btn btn-block btn-primary btn-lg"><i class="fa fa-plus-circle" aria-hidden="true"></i> Añadir pregunta</button>