Question

我为标题道歉，想不出最好的名字。

所以我的表中有2列。一个称为“分配”，另一个称为“所有者”。在这些列中是一张图片（完成后将从数据库中提取以更改人员，但现在我只是在前端工作）。

现在当我点击这些图片中的一张时，会出现一排更多图片，这应该允许用户更改谁是任务的“所有者”或者他们希望“分配”给任务的人。

当您从此行中选择此人时，该行应隐藏并将图像替换为所选人员（目前是随机图片）。

我的问题： 当点击'assign'图片时，我会从行中选择另一张图片。这很好用，它会隐藏行并更改'assign列'中的图片。但是，如果我现在点击“所有者”列中的图片然后选择一张图片，则会将其与“分配”列中的图片进行交换。

所以看起来我点击的第一个是从那时起改变的那个。

JSFIDDLE https://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'));
});

现在，当我点击行中的图片时，它会获取data-person属性，以便稍后输入正确的图片。然后我们循环遍历表中的所有图像，找到一个带有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();
            }
        }
    });

});

修改

好吧所以只是搞乱代码我想我知道问题，但不知道如何解决它。

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

使用它代替基本上做上述。现在在控制台中，它每次都记录相同的内容。因此.people-choose上的data-column属性不会改变，即使我每次点击都会改变它。选择它。

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/

jquery函数没有改变正确的图片

1 个答案: