Question

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

使用此解决方案，我只能用所有字母填写字段，并且不能仅连接具有所需字母的第一个字段。希望我解释一下这个。感谢。

Answer 1

我想我明白你想要的东西。

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

来自old列的图片会因不透明度而褪色，因此您可以看到哪个是。

如果您正在寻找

，请告诉我

＆＃13;

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)

  });
});

＆＃13;

.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
}

＆＃13;

<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" />

＆＃13;

Answer 2

你可以试试这个

＆＃13;

$('a.left_a').click(function(){
    var a_id = $(this).data('number');
    $('#input_'+a_id).val($('#right_'+a_id).data('letter'));
});

＆＃13;

<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 class="left_a" href="javascript:void(0);" data-number="1"><img src="http://placehold.it/350x150"></a>
        		<a class="left_a" href="javascript:void(0);" data-number="2"><img src="http://placehold.it/350x150"></a>
        	</div>
        	<div class="left_side one_half">
        		<a id="right_1" href="javascript:void(0);" data-letter="EI"><img data-letter="EI" src="http://placehold.it/350x150"></a>
        		<a id="right_2" href="javascript:void(0);" data-letter="AL"><img data-letter="EI" src="http://placehold.it/350x150"></a>
        	</div>
        </div>
<div class="answer_1">
		<input id="input_1" class="inputs letter square border_black" maxlength="1"  type="text" />
		<input id="input_2" class="inputs letter square border_black" maxlength="1"  type="text" />

＆＃13;

Answer 3

使用index()函数从parent找到所点击元素的索引。然后使用parent with childelement更改选择器。
使用eq()函数

＆＃13;

$('.left_side a[data-letter]').click(function(){
console.log('s')
  var a = $(this).index()
        $('.answer_1 .inputs').eq(a).val($(this).data('letter'));
    });

＆＃13;

<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" />

＆＃13;

Answer 4

第一名：将第二个div的class name更改为right_side <div class="right_side one_half">

第二名：您可以使用index()查找点击的元素first或second。根据{{1}}从右侧图片中选择index()。data-letter。

＆＃13;

eq(a)

＆＃13;

$('.left_side a').click(function(){
  var a = $(this).index()
        $('.inputs').eq(a).val($('.right_side a').eq(a).data('letter'));
    });

＆＃13;

Answer 5

根据我的想法，我无法理解你在尝试什么当点击第一个图像读取数据编号然后将其放入第一个输入当点击第二个图像数据字母然后把它放在第二个输入这是我的假设请检查下面是否是你的试着说

$.fn.hasAttr = function(name) {  
   return this.attr(name) !== undefined;
};  // create a function hasAttr

$(document).ready(function() {

      $('a').click(function(){
          if($(this).hasAttr('data-number')){
              $('#input_left ').val($(this).attr('data-number'));
         }else if($(this).hasAttr('data-letter'){
         $('#input_right').val($(this).attr('data-letter'));
        }
    });
});

在你的HTML中：

<input class="inputs letter square border_black" maxlength="1"  type="text" id="input_left" />
<input class="inputs letter square border_black" maxlength="1"  type="text" id="input_right" />

单击时自动输入

5 个答案: