Question

我有一张带有图片的清单。当我点击图像时我想突出显示它。我还有一个上传新图像按钮，它会在列表中上传新图像。但是当我点击上传的图片时，他们不会突出显示。这是代码段中的代码。

＆＃13;

function changePhoto(input) {
  if (input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var source = e.target.result;
      $(".list").append("<li><img src=" + source + " class='image'></li>")
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#addPhoto").change(function() {
  changePhoto(this);
});

$('.image').click(function(){
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
        });

＆＃13;

.image {
  height: 100px;
  width: 100px;
  cursor:pointer;
}
.selected {
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="file" value="Add new image" id="addPhoto">
</form>
<ul class="list">
  <li><img src="https://blog.shareaholic.com/wp-content/uploads/2015/06/shortlink.png" alt="" class="image"></li>
  <li><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="" class="image"></li>
</ul>

＆＃13;

Demo

突出显示上传的照片无效

0 个答案: