クリック時の自動入力

Question

2つの画像をクリックすると、自動的に入力を試みました。 左側には、2つの入力フィールドに接続する必要のある2つの画像があり、右側には、その入力にフィールドであるはずの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"> 
 
     \t <div id="old" class="left_side one_half"> 
 
     \t \t <a href="#" data-number="1"><img src="http://placehold.it/350x150"></a> 
 
     \t \t <a href="#" data-number="2"><img src="http://placehold.it/350x150"></a> 
 
     \t </div> 
 
     \t <div class="left_side one_half"> 
 
     \t \t <a href="#" data-letter="EI"><img data-letter="EI" src="http://placehold.it/350x150"></a> 
 
     \t \t <a href="#" data-letter="AL"><img data-letter="EI" src="http://placehold.it/350x150"></a> 
 
     \t </div> 
 
     </div> 
 
<div class="answer_1"> 
 
\t \t <input class="inputs letter square border_black" maxlength="1" type="text" /> 
 
\t \t <input class="inputs letter square border_black" maxlength="1" type="text" />

、私は、すべての文字でアルフィールドに入力することができ、そして所望の文字で最初のフィールドだけを接続することはできません。 私はこの権利を説明することを願っています。ありがとう。

Answer 1

私は私はあなたが欲しいものを理解すると思います。

以下の例では、選択した入力（クリックされたデータ番号に応じて、#old a）が青色の背景になることがわかります。次に、画像の2番目の列（データ文字付き）をクリックすると、以前に選択された入力（青色の背景）は、クリックされた画像のデータ文字に値を与えます。

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

Answer 2

あなたはこの

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="question"> 
 
     \t <div id="old" class="left_side one_half"> 
 
     \t \t <a class="left_a" href="javascript:void(0);" data-number="1"><img src="http://placehold.it/350x150"></a> 
 
     \t \t <a class="left_a" href="javascript:void(0);" data-number="2"><img src="http://placehold.it/350x150"></a> 
 
     \t </div> 
 
     \t <div class="left_side one_half"> 
 
     \t \t <a id="right_1" href="javascript:void(0);" data-letter="EI"><img data-letter="EI" src="http://placehold.it/350x150"></a> 
 
     \t \t <a id="right_2" href="javascript:void(0);" data-letter="AL"><img data-letter="EI" src="http://placehold.it/350x150"></a> 
 
     \t </div> 
 
     </div> 
 
<div class="answer_1"> 
 
\t \t <input id="input_1" class="inputs letter square border_black" maxlength="1" type="text" /> 
 
\t \t <input id="input_2" class="inputs letter square border_black" maxlength="1" type="text" />

Answer 3

1. がparent with childelementでセレクタを変更する.so index()機能を使用してparentからクリックされた要素のインデックスを検索してみてくださいすることができます。
2. そしてeq()機能

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

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

Answer 4

第一使用尊敬入力要素を選択します。right_side<div class="right_side one_half">

第二に2つ目のdivのためのclass nameを変更：することができますがつかいますindex()をクリックすると、クリックされた要素はfirstまたはsecondとなります。それに基づいてindex()data-letterを右側の画像から選択します。使用eq(a)。

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

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

Answer 5

私は最初の画像をクリックしてくださいは、データ数を読んだとき が第2の最初の入力 とするときクリックでそれを置くと思います私の前提あたりのように私はあなたがしようとしているかを理解カント画像データ文字が第2 入力の上に置くこれが私の仮定で、それはあなたが

を言おうとし が何であるかである場合に以下を確認してください。あなたのHTML内

$.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')); 
     } 
    }); 
}); 

：

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