1

ユーザーが画像をクリックするたびに、JavaScriptで正確な「PostId」の値を取得するにはどうすればよいですか

for (int i = 0; i < Model.Count; i++)
{

<img src="/images/icon_edit.gif" width="22" height="19" class="Edit" itemid="post" />
@Html.HiddenFor(x => x[i].PostId, new { @class = "postnew" })    
}

JS:

$(document).ready(function () {
  $('.Edit').click(function () {
      alert($("#post").val());

      var params = { uname: $(this).val() };

      $.ajax({
          url: "/Profile/Post",
          type: "Get",
          data: { id: $("#post").val() }     
      });
  });
});
4

2 に答える 2

2

投稿 ID をデータ属性としてレンダリングし、 jQuery を使用してアクセスできます。

@for (int i = 0; i < Model.Count; i++)
{    
  <img src="/images/icon_edit.gif" width="22" height="19" class="Edit" data-post-id="@x[i].PostId" />   
}

jQuery:

$(document).ready(function () {
  $('.Edit').click(function () {
      var $this = $(this), id = $this.data('postId');

      $.ajax({
          url: "/Profile/Post",
          type: "Get",
          data: { id: id }     
      });
  });
});

結果のimgマークアップは次のようになります。

 <img src... data-post-id="1" ... />

jQuery では、 を使用して属性を読み取ることができます.data()。ハイフンで区切られた名前はキャメルケースになるため、postId.

しかし、もっとうまくやれる...

  1. .onで装飾された要素に対する現在および将来のすべてのクリック イベントを処理するために、を使用することを検討してください.Edit。.Editこれは、 の新しい要素が後で DOM に追加される可能性がある場合に便利です。これらの要素は自動的に含まれるためです。

     $(document).on('click', '.Edit', function() { /* ... */ });

  2. 画像をクリック可能にするのではなく、意味的に意味のあるマークアップを使用し、画像をアンカーでラップすることを検討してください。href次に、投稿の URL のアンカーに を追加するだけです。その後、データ属性を廃止して、AJAX 呼び出しを行うことができます。

    @for (int i = 0; i < Model.Count; i++)
{    
   <a href="@Url.Action("Post", "Profile", new{id = x[i].PostId})" class="Edit"><img src="/images/icon_edit.gif" width="22" height="19" /></a>
}

$(document).ready(function () {
  $(document).on('click', '.Edit', function () {
      var url = $(this).attr('href');

      $.ajax({
          url: url,
          type: "Get"  
      });
  });
});
于 2013-09-21T07:46:55.217 に答える
0

データ属性を使用したソリューションは優れていますが、隠しフィールドを使用する場合は、jQuery next()セレクターを使用できます。

$(document).ready(function () {
  $('.Edit').click(function () {

      // the 'next' hidden field for the img
      var id = $(this).next().val(); 

      $.ajax({
          url: "/Profile/Post",
          type: "GET",
          data: { id: id }     
      });
  });
});
于 2013-09-26T08:45:22.490 に答える