如何获取当前可见图像src来填充表单的字段？

debugcn 发表于 Dev

朱皮克

在我的Rails应用程序中，以创建新帖子的形式，我正在使用Metainspector抓取链接并获取所提供网站的图像。

响应位于ajax中，然后我使用一个脚本，该脚本仅显示返回列表的一个图像。有上一个和下一个按钮可循环浏览它们。我希望可见图像的src属性由jQuery抓取以填充表单的字段。

当我单击上一个或下一个时，我的字段的内容已更改，但是它将显示先前显示的图像，而不是实际的图像。我不知道该如何触发。如果显示Image3，则我的字段中有Image2的src ...

我应该在此代码中添加/更改什么以用当前显示的源图像而不是上一个图像填充该字段？

这是jQuery代码：

var speed = 100;

$(".prev").click(function() {
    var now = $(this).parent().next("ul.gallery").children(":visible"),
        last = $(this).parent().next("ul.gallery").children(":last"),
        prev = now.prev();
        prev = prev.index() == -1 ? last : prev;
    now.fadeOut(speed, function() {prev.fadeIn(speed);});

    var img_src = $('.list_img').children(":visible").attr("src");
    $('#image_url').val(img_src);
});


$(".next").click(function() {
    var now = $(this).parent().next("ul.gallery").children(':visible').addClass("show"),
        first = $(this).parent().next("ul.gallery").children(':first'),
        next = now.next();
        next = next.index() == -1 ? first : next;
    now.fadeOut(speed, function() {next.fadeIn(speed);});

    var img_src = $('.list_img').children(":visible").attr("src");
    $('#image_url').val(img_src);
});

$(".gallery li").click(function() {
    var first = $(this).parent().children(':first'),
        next = $(this).next();
        next = next.index() == -1 ? first : next;
    $(this).fadeOut(speed, function() {next.fadeIn(speed);});
});

以及new.html.erb中表单的相关部分：

<%= simple_form_for(@deal) do |f| %>  

<%= f.text_field :link, id: 'link' %>

<div class="slideButtons">
    <span class="prev"><</span>
    <span class="next">/ ></span>
</div>
<ul class="gallery" id="scrap_img">
</ul>

<%= f.text_field :image_url, id: "image_url" %>

<%= f.submit %>

德文·霍华德

问题是由于fadeIn回调引起的。这是怎么回事：

您单击.prev或.next
旧图像开始淡出
image_url字段使用旧（仍可见）图像的src更新
旧图像逐渐淡出
新图像逐渐淡入。

重做上一步骤的方法如下：

$(".prev").click(function() {
  var now = $(this).parent().next("ul.gallery").children(":visible"),
      last = $(this).parent().next("ul.gallery").children(":last"),
      prev = now.prev();
      prev = prev.index() == -1 ? last : prev;
  now.fadeOut(speed, function() {
    prev.fadeIn(speed);
    $('#image_url').val($(prev).attr('src'))
  });
});

您还可以使用DOM清理该索引跟踪逻辑，执行类似的操作（移动实际元素而不是有选择地显示特定元素）：

$('.prev').click(function) {
  $('.gallery > img').first().fadeOut(speed, function() {
    var newImage = $('.gallery > img').last()
    $(newImage).detach().prependTo('.prev').fadeIn(speed)
    $('#image_url').val($(newImage).attr('src'))
  })
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。