javascript - jqueryの複数の要素から選択

Question

onClick = 'function(this)'このJavaScriptコードをjQueryに変更しようとしていますが、jQueryの.click関数で使用するのと同じことはわかりません。

JavaScript：

function setInput(text) {

   var getClicked = text.name;
   var  click = document.getElementById(getClicked);
   var  show = document.getElementById('show_' + getClicked);

   show.value = click.value;
}

HTML：

<input type='text' name = "a" id = "a" onclick='setInput(this);'>
<input type = "text" id = "show_a"><br>
<input type='text' name = "b" id = "b" onclick='setInput(this);'>
<input type = "text" id = "show_b">

Answer 1

$('input[type="text"]').on('click', function(){
  $('#show_' + $(this).attr('name')).val($(this).val());
});

Answer 2

入力がすでにDOMに存在する場合、以下が機能します。

$('#a, #b').click(function () {
    setInput(this);
});

それ以外の場合は、試してください

$(function() {
    $('#a, #b').click(function () {
        setInput(this);
    });
});

Answer 3

HTML：

<input class="clickme" type="text" name ="a" id ="a">
   <input type ="text" id ="show_a"><br>
<input class="clickme"  type="text" name ="b" id ="b">
   <input type ="text" id ="show_b">

jQuery：

$(document).ready(function(){
    $(".clickme").click(function(){
        id = "#show_";
        id += $(this).prop("id");
        $(id).show();
    });
});

フィドル： http： //jsfiddle.net/gTtHT/1/

Answer 4

jQueryはCSSセレクターを使用してDOMの要素にアクセスします。これらの入力要素に「settable」などのクラス名を付けると、次の動作を追加できます。

$(".settable").click(function(e){
    var getClicked = $(this).attr('name');
    ...
});

ここで、$（this）は、クリックされた要素を指します。