Bagaimana cara mendapatkan gambar src yang terlihat saat ini untuk mengisi bidang formulir saya?

Di aplikasi Rails saya, dalam bentuk pembuatan postingan baru, saya menggunakan Metainspector untuk menghapus link dan mendapatkan gambar dari website yang disediakan.

Responsnya dalam ajax dan kemudian saya menggunakan skrip yang hanya menampilkan satu gambar dari daftar yang dikembalikan. Ada tombol sebelumnya dan berikutnya untuk melewatinya. Saya ingin atribut src gambar yang terlihat diambil oleh jQuery untuk mengisi bidang formulir saya.

Ketika saya mengklik sebelumnya atau berikutnya, konten bidang saya berubah, TAPI ini menampilkan gambar yang ditampilkan sebelumnya, bukan gambar sebenarnya. Saya tidak tahu bagaimana memicunya. Jika saya menampilkan Gambar3, saya memiliki src dari Gambar2 saya di bidang saya...

Apa yang harus saya tambahkan/ubah dalam kode ini untuk mengisi kolom dengan gambar sumber yang sedang ditampilkan, dan bukan gambar sebelumnya?

Berikut kode jquerynya:

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);});
});

Dan bagian terkait formulir di 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 sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Masalahnya adalah karena panggilan balik fadeIn. Yang terjadi adalah ini:

  1. Anda mengklik .prev atau .next
  2. Citra lama mulai memudar
  3. Bidang image_url diperbarui dengan src gambar lama (masih terlihat).
  4. Citra lama akhirnya memudar
  5. Citra baru memudar.

Berikut cara mengulang sebelumnya:

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

Anda juga dapat menggunakan DOM untuk membersihkan logika pelacakan indeks tersebut, dengan melakukan sesuatu seperti ini (memindahkan elemen sebenarnya alih-alih menampilkan elemen tertentu secara selektif):

$('.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
Terima kasih atas tanggapan Anda, saya semakin dekat dengan solusi DOM Anda! Saya sekarang dapat mengambil gambar src saat ini ke bidang saya. Tapi bagaimana cara menghapus gambar sebelumnya? Ketika saya mengklik untuk mengulang gambar saya, gambar tersebut menjadi terlihat tetapi belum pernah mencoba menggunakan fadeOut tetapi tidak berhasil. - person Jupik; 31.10.2016
comment
fadeOut harus melakukannya. Sulit untuk berkomentar lebih banyak tanpa melihat basis kode Anda @ - person Devin Howard; 31.10.2016