同じクラスの同じページに複数の要素がある場合にクラスを使ってIDを選択する方法

Question

私はこのデータを持っていますテーブルの行のIDをリンクに割り当てました。本質的に一意のID各リンクについて私はまた、各リンクにクラスを割り当てました。

私が達成したいのは基本的に私がクラスを介してIDを選択することによってIDの値をテキストボックスに割り当てることができるボタンをクリックするときです。

これはクラスとIDを割り当てたリンクです。これは、表の各項目についてデータ表全体にわたって繰り返されます。このリンクをコントローラのajaxメソッドで実行します。これはコントローラの文字列であるため、IDにプラス記号がある理由です。

<a href='{0}' data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'> 

これはあなたのIDに来て+を除去することによって、IDの正確な値を割り当てテキストボックス

$(".messageBtn").click(function() { 
     var mobileNumberId = $(".messageBtn").attr("id"); 
     $("#mobileTxtBox").val(mobileNumberId); 
    }) 

Answer 1

$(".messageBtn").click(function() { 
     var data = $(this).attr("id"); 
     $("#mobileTxtBox").val(data); 
    }) 

$(this)で試してみると、現在の「クリックされた」ボタンが選択されています。 $('.messageBtn)を使用してvarに保存すると、そのクラスのすべての要素が保存されます。

Answer 2

$(".messageBtn").click(function() { 
 
     var mobileNumberId = $(".messageBtn").attr("id"); 
 
     console.log(mobileNumberId); 
 
     $("#mobileTxtBox").val(mobileNumberId.substring(mobileNumberId.indexOf('+')+1, mobileNumberId.lastIndexOf('+'))); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'>click</a> 
 
<input type="text" id="mobileTxtBox">

に割り当てるための機能である

Answer 3

入力の場合はval()メソッド、別の要素の場合はtext()またはhtml()メソッドを使用します。

$(".messageBtn").click(function() { 
 
    var mobileNumberId = $(".messageBtn").attr("id"); 
 
    $("#mobileTxtBox").val(mobileNumberId); 
 
    $("#mobileP").text(mobileNumberId); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="mobileP">&nbsp;</p> 
 
<p> 
 
    <input id="mobileTxtBox" type="text"> 
 
</p> 
 
<a href='#' data-toggle='modal' data-target='#DivAppendToPartialView' id='"+item.mobileNumber+"' class='messageBtn'>Click ME</a>