Функция jquery не меняет правильные картинки

Question

Прошу прощения за звание, не мог придумать лучшего имени.

Итак, у меня есть 2 колонки в моем столе. Один называется «назначить» и другого «владельца». В этих столбцах изображена картинка (когда закончите вытащить из базы данных, чтобы изменить людей, но пока я просто работаю на лицевой стороне).

Теперь, когда я нажимаю на одну из этих картин, появляется ряд более картин, это должно позволить пользователю изменять, кто является «владельцем» задачи или кто хочет «назначить» задачу.

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

Моя проблема: При нажатии на изображение «назначить», затем выберите другое изображение из строки. Это отлично работает, он скрывает строку и меняет изображение в столбце назначения. Однако, если я сейчас нажимаю на изображение в столбце «владелец», тогда выберите изображение, оно меняет его с изображением в столбце «назначить».

Таким образом, похоже, что первый, на который я нажимаю, является тем, который меняется с этого момента.

JSFIDDLEhttps://jsfiddle.net/juxgo0gb/

вот мой jsfiddle, если вы хотите, чтобы дать ему быстро попробовать, если не я буду мимо соответствующих фрагментов кода внизу. (В jsfiddle я изменил картины на TinyPic ссылки)

<table id="create-table"> 
    <tr> 
     <th>Assign</th> 
     <th>Owner</th> 
    </tr> 
    <tr> 
     <td> 
      <div class="empty-picture-holder"> 
       <img data-column="assigner" class="selectedImg" width="40" height="40" src="{{ asset('img/me.jpg') }}" /> 
      </div> 
     </td> 
     <td> 
      <div class="empty-picture-holder"> 
       <img data-column="owner" class="selectedImg" width="40" height="40" src="{{ asset('img/me.jpg') }}" /> 
      </div> 
     </td> 
    </tr> 

Это строка фотографий:

<div class="col-md-12 people-choose" data-column=""> 
    <img width="40" height="40" data-person="matt" src="{{asset('img/me.jpg') }}" /> 
    <img width="40" height="40" data-person="rhian" src="{{asset('img/rhian.jpg') }}" /> 
    <img width="40" height="40" data-person="crystal" src="{{asset('img/crystal.jpg') }}" /> 
    <img width="40" height="40" data-person="scarlett" src="{{asset('img/scarlett.jpg') }}" /> 
</div> 

Jquery:

$(document).on('click', '.selectedImg', function(){ 
    $('.people-choose').show(); 
    $('.people-choose').attr('data-column',$(this).data('column')); 
}); 

Теперь, когда я нажимаю на картинке в строке, он получает атрибут данные лица для последующего тянуть в рисунке справа. Тогда мы перебирать всех изображений в таблице и найти один с данными столбца = «Assigner» или «owber»

$('.people-choose img').click(function(){ 
    var $person = $(this).data('person'); 
    $('.selectedImg').each(function(){ 
     if($('.people-choose').data('column') == 'assigner'){ 
      if($(this).data('column') == 'assigner'){ 
       $('.people-choose').attr('data-column',''); 
       console.log('assigner'); 
       $(this).parents('.empty-picture-holder').append('<img data-column="assigner" class="selectedImg" width="40" height="40" src="http://localhost:8888/img/'+ $person +'.jpg">'); 
       $(this).remove(); 
      } 
     } 
     if($('.people-choose').data('column') == 'owner'){ 
      if($(this).data('column') == 'owner'){ 
       $('.people-choose').attr('data-column',''); 
       console.log('owner'); 
       $(this).parents('.empty-picture-holder').append('<img data-column="owner" class="selectedImg" width="40" height="40" src="http://localhost:8888/img/'+ $person +'.jpg">'); 
       $(this).remove(); 
      } 
     } 
    }); 

}); 

EDIT:

хорошо так просто возиться с кодом я думаю, что знаю проблему, но не знаю, как ее решить.

$('.people-choose img').click(function(){ 
    var $person = $(this).data('person'); 
    $column = $('.people-choose').data('column'); 
    var $new =$('#create-table').find("[data-column='" + $('.people-choose').data('column') + "']"); 
    console.log($new); 
}); 

используя это вместо этого по существу делает вышеуказанный. Теперь в консоли он регистрируется одинаково каждый раз. Поэтому атрибут data-column на .people-select не меняется, хотя я меняю его каждый раз, когда нажимаю кнопку .selectedImg.

Answer 1

Я Перепишите код с помощью данных для выбора строки

$(document).on('click', '.selectedImg', function(){ 
     $('.people-choose').show(); 
     console.log($(this).data('column')); 
     $('.people-choose').data('column',$(this).data('column')); 
    }); 

    $('.people-choose img').click(function(){ 

     console.log($(".people-choose").data("column")); 
      $("img[data-column='"+$(".people-choose").data("column")+"']").attr("src",$(this).data("person")); 
     $(".people-choose").hide(); 
    }); 

Ссылка: https://jsfiddle.net/juxgo0gb/3/