javascript - 点击自动输入

我尝试根据两张图片对点击进行自动输入。
在左侧，我有2个图像需要与两个输入字段连接，在右侧上也有两个带有字母的图像应在该输入字段中连接。因此，如果单击图像1，则输入1将是带有字母的字段，该字母与右侧的图像相连。

$('a').click(function(){
        $('.inputs').val($(this).data('letter'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
        	<div id="old" class="left_side one_half">
        		<a href="#" data-number="1"><img src="http://placehold.it/350x150"></a>
        		<a href="#" data-number="2"><img src="http://placehold.it/350x150"></a>
        	</div>
        	<div class="left_side one_half">
        		<a href="#" data-letter="EI"><img data-letter="EI" src="http://placehold.it/350x150"></a>
        		<a href="#" data-letter="AL"><img data-letter="EI" src="http://placehold.it/350x150"></a>
        	</div>
        </div>
<div class="answer_1">
		<input class="inputs letter square border_black" maxlength="1"  type="text" />
		<input class="inputs letter square border_black" maxlength="1"  type="text" />

使用此解决方案，我只能用所有字母填写所有字段，而不能仅用所需字母连接第一个字段。
希望我解释这个权利。谢谢。

最佳答案

我想我明白你想要什么。

在下面的示例中，您将看到所选输入（取决于单击的#old a的数据号）将显示蓝色背景。然后，当单击图像的第二列（带有数据字母）时，先前选择的输入（带有蓝色背景）将获得值，即所单击图像的数据字母

old列中的图像随着不透明而褪色，因此您可以看到哪个。

让我知道您是否在寻找

var input = $(".inputs")
$('#old a').click(function() {
  var nr = $(this).attr("data-number"),
  letterA = $(this).parent("#old").siblings(".left_side").find("a")
  $(".selected").removeClass("selected").val("")
  $(input).eq(nr - 1).addClass("selected")



  $(letterA).on("click", function() {
    var letter = $(this).attr("data-letter")

    $(".selected").val(letter)

  });
});

.left_side {
  float: left;
  width: 50%;
}

.selected {
  background: blue;
}

input {
  color: red
}

#old img {
  opacity: 0.5
}

img {
  max-width: 100%;
  height: auto;
}

a {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div id="old" class="left_side one_half">
    <a href="#" data-number="1"><img src="http://placehold.it/350x150"></a>
    <a href="#" data-number="2"><img src="http://placehold.it/350x150"></a>
  </div>
  <div class="left_side one_half">
    <a href="#" data-letter="EI"><img data-letter="EI" src="http://placehold.it/350x150"></a>
    <a href="#" data-letter="AL"><img data-letter="EI" src="http://placehold.it/350x150"></a>
  </div>
</div>
<div class="answer_1">
  <input class="inputs letter square border_black" maxlength="1" type="text" />
  <input class="inputs letter square border_black" maxlength="1" type="text" />

关于javascript - 点击自动输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45321565/