div img src' title'使用java脚本形成输入

时间:2014-11-11 20:43:18

标签: javascript jquery html css

嘿所有我都有一个从这些img src中选择的javascript并显示在一个更大的图像容器中。我现在需要做的是获取所选图像的标题并将其传递给表单输入。

这是div:

<div class="imgcontainer" id="imgch">
<div class="minicontainer">
    <img src="bl.jpg"   title="blue paper"   class="miniimg" />
    <img src="grey.jpg" title="grey paper" class="miniimg2" />
    <img src="vel.jpg"  title="velum paper" class="miniimg3" />
    <img src="wht.jpg"  title="white paper" class="miniimg" />
</div>
</div>

这是我尝试使用的java脚本:

<script>
$('#imgch').bind('change click keyup', function() {
$('#imgchange').val($(this).val());
});
</script>

以及我希望它最终形成的形式:

 <input type="text"   name="imgchan"  id="imgchange"><br>

我假设我需要使用类似的脚本,但指示它专门采用标题,但我不确定如何。

一如既往地帮助大家赞赏: - )

2 个答案:

答案 0 :(得分:2)

您可以使用事件的target属性来获取实际点击的图片:

$(function () {
  $('#imgch').bind('change click keyup', function(e) {
    $('#imgchange').val($(e.target).attr('title'));
  });
});

请参阅demo

答案 1 :(得分:1)

关注容器中图片的点击次数:

$('#imgch').on('click', 'img', 
   function() {
    $('#imgchange').val( $(this).attr('title') );
   }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgcontainer" id="imgch">
  <div class="minicontainer">
    <img src="bl.jpg"   title="blue paper"  class="miniimg" />
    <img src="grey.jpg" title="grey paper"  class="miniimg2" />
    <img src="vel.jpg"  title="velum paper" class="miniimg3" />
    <img src="wht.jpg"  title="white paper" class="miniimg" />
  </div>
</div>

<input type="text"   name="imgchan"  id="imgchange"><br>