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

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

2 个答案: