将单击的图像 URL 解析为表单字段

Question

我正在使用fancybox 在模式窗口中显示联系表单（内联）。 此表单的触发器是单击图像时 - 如果可能，我想做的是将单击的图像 url 输入到表单字段之一中，但不确定我将如何执行此操作？ 我认为这可以通过将单击的图像 URL 存储在变量中然后将其调用到 msg 字段中来实现？

Answer 1

作为触发器的一部分，您可以使用prop()获取图像的 src 并将其存储在如下变量中：

var clickedImageURL;

$("body").on("click", "img", function() {
  clickedImageURL = $(this).prop("src");
  // do whatever else your function does
});

然后，您可以通过定位并使用val()来设置任何输入的值，例如：

$("your-input-field").val(clickedImageURL);

使用它的一个例子： http : //codepen.io/jonathanrbowman/pen/pjLZBB

Answer 2

有一个 html 像：

<a class="fancybox" href="images/image01.jpg"><img src="thumbs/thiumb01.jpg" alt=""/></a>

...您可以使用fancybox回调来使用上述锚点的href属性值填充表单字段。 您可能唯一需要的是要填充的表单字段的选择器，因此您可以执行以下操作：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        type: "inline",
        href: "#myform",
        beforeShow: function () {
            $("#myform").find(".inputURL").val($(this.element).attr("href"))
        }
    }); // fancybox
}); // ready

请注意，选择器#myform是表单的 ID，选择器.inputURL是表单字段的类名。 另请注意，我们将type更改为inline因为我们打算打开内联表单（用于说明目的）而不是fancybox 中的实际图像。 当然，我们还更改了href选项以定位表单而不是图像。

见JSFIDDLE