Question

大家好我有一个简单的问题，但我不知道如何解决它。所以我从flickr动态检索图像，我想保存到db照片ID，网址和专辑标题，这是我已经实现的，但是当我点击图像时，它会保存我页面上的所有图像。所以这是我的观点

$(document).ready(function () {

    // set to  url main parameter apikey and userid for retrieve photosets with all additional info
    var url = 'https://api.flickr.com/services/rest/?&method=flickr.photosets.getList&api_key=715a9548b42114d69859975d717210cd&user_id=@ViewBag.uId&format=json&jsoncallback=?';
    $.getJSON(url, function (data) {
        $.each(data.photosets.photoset, function (idx, item) {

            var photosetid = item.id;
            var photosurl = 'https://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=e6be1bfdf4294482904dce01ac431615&photoset_id=' + photosetid + '&media=photos&format=json&jsoncallback=?&per_page=?';

            //  build a new url for each photoset
            $('#gallery').append('<h3 class="echo" id="' + idx + '" >' + item.title._content + '</h3><ul class="gallery photos grp' + idx + '"></ul>');

            $.getJSON(photosurl, function (data) {
                $.each(data.photoset.photo, function (photoNum, photo) {
                    var photoid = photo.id;
                    var secret = photo.secret;
                    var server = photo.server;
                    var farm = photo.farm;
                    var photo_url = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoid + '_' + secret + '_s.jpg';
                    var photo_urlm = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoid + '_' + secret + '_m.jpg';
                    $('.photos.grp' + idx).append('<li><a class="example" data-toggle="tooltip" id="'+photo.id+'"  title="' + photo.title + '"  href="#"><img data-album="'+item.title._content+'" class="save" id="'+photoid+'" title="'+photo.title+'" src="' + photo_url + '" /></a></li>');
                    //  $('.photos.grp' + idx).css('display','none');
                      var id = 'h3#' + idx;
                    $('#gallery').on('click', id, function() {
                        $(this).next('photos.grp' + idx).toggle();
                    });

                    $('.photos').css('list-style-type', 'none');

                    $('.example').tooltip(
                    {
                        animation: true,
                    });
                    // i'm little confused about correct writing of this request, it's save all img's url's, title and etc. beginig from that iamge wath you clicked
                    // instead of saving only one...
                    $('.save').click(function () {
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("Save","Home")',
                            data: { id: photoid, albumName: item.title._content, photoUrl: photo_url },
                            success: function() {
                                $('#result').text('Image has been saved');
                                var refreshId = setInterval(function() {
                                    $('#result').empty();
                                }, 3000);
                            },
                    });
                    });
                });


            });
        });

    });


});

控制器

  public ActionResult Save()
    {
        return View("Index");
    }
    [HttpPost]
    public ActionResult Save(Favourite model)
    {
        db.Favourites.Add(model);
        db.SaveChanges();
        return View("Index");
    }

和简单模型

  public class Favourite
{
    public int Id { get; set; }
    public string photoUrl { get; set; }
    public string albumName { get; set; }

}

Answer 1

因为您正在使用$.each()遍历所有图片，并且您在每个循环上调用保存帖子。它的设计并不是你想要的。

您需要重新定义输入到post对象的变量，并且可以通过从已加载的<img>标记中捕获数据来轻松完成。

您的代码正在执行的操作是为其循环的每个图像应用.click()事件并将其应用于.save链接。这就是为什么它在你点击它时保存所有图像。你必须个性化点击，我的意思是你必须首先只定位这个<img>（不是全部），你必须从你在{{中定义的属性中提取参数来保存图像。 1}}标记，而不是使用在每个函数中收集的变量。

您可以查看此修改后的代码，了解它是如何完成的：

<img>

保存有关一个图像的信息

1 个答案: