วิธีรับ src รูปภาพที่มองเห็นได้ในปัจจุบันเพื่อกรอกแบบฟอร์มของฉัน

ในแอป Rails ของฉัน ในรูปแบบของการสร้างโพสต์ใหม่ ฉันใช้ Metainspector เพื่อคัดลอกลิงก์และรับรูปภาพของเว็บไซต์ที่ให้มา

การตอบสนองอยู่ใน ajax จากนั้นฉันใช้สคริปต์ที่แสดงเพียงภาพเดียวของรายการที่ส่งคืน มีปุ่มก่อนหน้าและถัดไปเพื่อวนซ้ำ ฉันต้องการให้ jQuery คว้าแอตทริบิวต์ src ของภาพที่มองเห็นได้เพื่อกรอกแบบฟอร์มของฉัน

เมื่อฉันคลิกก่อนหน้าหรือถัดไป เนื้อหาในช่องของฉันก็เปลี่ยนไป แต่จะแสดงรูปภาพที่แสดงก่อนหน้านี้ ไม่ใช่รูปภาพจริง ฉันไม่รู้วิธีกระตุ้นสิ่งนั้น ถ้าฉันแสดง 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 %>

Jupik 31.10.2016 แหล่งที่มา

คำตอบ (1)

arrow_upward
0
arrow_downward

ปัญหาเกิดจากการเรียกกลับของ 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'))
  })
})

Devin Howard 31.10.2016

comment

ขอบคุณสำหรับการตอบกลับ ฉันเข้าใกล้โซลูชัน DOM ของคุณมากขึ้นแล้ว! ตอนนี้ฉันสามารถดึง src รูปภาพปัจจุบันลงในฟิลด์ของฉันได้แล้ว แต่ฉันจะทำอย่างไรเพื่อลบภาพก่อนหน้า? เมื่อฉันคลิกเพื่อวนซ้ำรูปภาพของฉัน รูปภาพเหล่านั้นปรากฏให้เห็นแต่ dont disappear. Ive พยายามใช้ fadeOut แต่ไม่ประสบผลสำเร็จ - Jupik; 31.10.2016

comment

fadeOut ควรทำ เป็นการยากที่จะแสดงความคิดเห็นเพิ่มเติมโดยไม่เห็นฐานรหัสของคุณ @ - Devin Howard; 31.10.2016

วิธีรับ src รูปภาพที่มองเห็นได้ในปัจจุบันเพื่อกรอกแบบฟอร์มของฉัน

คำตอบ (1)

คำถามในหัวข้อ