我尝试根据两张图片在点击时自动输入。 在左侧我有 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
的数据编号)将获得蓝色背景。然后当点击第二列图像(带数据字母)时,先前选择的输入(带蓝色背景)将获得点击图像的数据字母的值
旧
列中的图像已不透明地淡化,因此您可以看到哪个是哪个。
如果这就是你要找的,请告诉我
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/