Question

我有一个显示各种图像的模态。

我还有一个包含5个文本类型输入的表单。单击图像以在活动输入中填写正确的URL时如何获得？

所有图片标签如下：

<img data-dismiss="modal" class="img-responsive" src="nameImage.png"/>

目前我只能填写一个输入

$('img').click(function(){
    $('#url_image').val($(this).attr('src'));
})

形式：

<form method="post">
    <button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
    <input type="text" id="url_image" name="url_image" value="">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

    <input type="submit">
</form>

Answer 1

您可以使用focus事件来存储关注的上一个input元素，使用此变量更新input value。

注意，button元素中点击的form元素可能会导致form提交

＆＃13;

var focused = null;

$("input").on("focus", function() {
  focused = $(this);
})

$("img").click(function() {
  if (focused.length)
  focused.val($(this).attr("src"));
})

＆＃13;

input {
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <input type="text" id="url_image" name="url_image" value="">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">

  <input type="submit">
</form>
<button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
<img src="http://lorempixel.com/50/50/cats" />
<img src="http://lorempixel.com/50/50/nature" />

＆＃13;

Answer 2

你可以这样做。

JS：

$(".common_class").on('focus', function() {

     $(".common_class").removeClass('active');
     $(this).addClass('active');
})

$('img').click(function() {
     $('.common_class.active').val($(this).attr('src'));
})

HTML：

<form method="post">
        <button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
        <input type="text" class="common_class" name="url_image" value="">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="text" class="common_class">
        <input type="submit">
        <img data-dismiss="modal" class="img-responsive" src="nameImage.png" />

使用网址图片填充输入

2 个答案: