Как получить текущее видимое изображение src для заполнения поля моей формы?

В моем приложении Rails, в форме создания нового поста, я использую Метаинспектор, чтобы удалить ссылку и получить изображения предоставленного веб-сайта.

Ответ находится в ajax, а затем я использую скрипт, который отображает только одно изображение возвращаемого списка. Есть кнопки «предыдущий» и «следующий», чтобы просмотреть их. Я хочу, чтобы атрибут src видимого изображения был захвачен jQuery для заполнения поля моей формы.

Когда я нажимаю на предыдущий или следующий, содержимое моего поля изменяется, НО оно отображает ранее показанное изображение, а не фактическое. Я не знаю, как это вызвать. Если я показываю Image3, у меня есть src моего Image2 в моем поле...

Что я должен добавить/изменить в этом коде, чтобы заполнить поле текущим отображаемым исходным изображением, а не предыдущим?

Вот код 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 %>

ruby-on-rails javascript web-scraping jquery ajax
person Jupik    schedule 31.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема связана с обратными вызовами fadeIn. Что происходит, так это:

  1. Вы нажимаете .prev или .next
  2. Старое изображение начинает исчезать
  3. Поле image_url обновляется старым (все еще видимым) исходным кодом изображения.
  4. Старое изображение заканчивает исчезать
  5. Новое изображение исчезает.

Вот как повторить предыдущее:

$(".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'))
  })
})
person Devin Howard    schedule 31.10.2016
comment
Спасибо за ваш ответ, я приближаюсь к вашему решению DOM! Теперь я могу захватить текущее изображение src в свое поле. Но как я могу удалить предыдущие изображения? Когда я нажимаю, чтобы просмотреть мои изображения, они становятся видимыми, но dont disappear. Ive пытался использовать затухание, но безуспешно. - person Jupik; 31.10.2016
comment
fadeOut должен сделать это. Трудно комментировать больше, не видя вашей кодовой базы @ - person Devin Howard; 31.10.2016