CODEWITHSUNDEEP
javascriptjquery
Matthew Smart
Matthew Smart

Reputation: 1319

jquery function isn't changing the correct pictures

I apologise for the title, couldn't think of the best name.

So i have 2 columns in my table. One called 'assign' and the other 'owner'. In these columns are a picture (when finished will be pulled from the database to change people but for now i'm just working on front end).

Now when i click on one of these pictures a row of more pictures appears, this should allow the user to change who is the 'owner' of the task or who they wish to 'assign' to the task.

When you choose the person from this row, the row should hide and replace the image with the selected person(random picture for now).

My problem: When clicking on the 'assign' picture , i then choose another picture from the row. This works great, it hides the row and changes the picture in the 'assign column'. However if i now click on the picture in the 'owner' column then choose a picture, it swaps it with the picture in the 'assign' column.

So it looks like the first one i click on is the one that changes from then on.

JSFIDDLE https://jsfiddle.net/juxgo0gb/

here is my jsfiddle if you want to give it a quick try, if not i will past the relevant pieces of code underneath.(in the jsfiddle i have changed the pictures to tinypic links)

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

This is the row of pictures:

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

Now when i click on a picture in the row, it gets the data-person attribute for later to pull in the right picture. Then we cycle through all the images in the table and find the one with the data-column="assigner" or "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:

okay so just messing around with the code i think i know the problem, but dont know how to solve it.

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

using that instead essentially does the above. Now in the console it logs the same everytime. So the data-column attribute on .people-choose is not changing, even though i change it every time i click .selectedImg.

Upvotes: 4

Views: 45

Answers (1)

LTasty
LTasty

Reputation: 2008

I Rewrite your code using data for select the row

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

Link:https://jsfiddle.net/juxgo0gb/3/

Upvotes: 4

Related Questions