在jquery中单击时如何获取id的'a'标签？答案

【问题标题】：How to get 'a' tag of id while click that in jquery?在jquery中单击时如何获取id的'a'标签？
【发布时间】：2018-05-05 07:27:30
【问题描述】：

我在 ASP.Net MVC 中创建了一个动态的 a 标签。我想根据我用 jQuery 单击的菜单列出主题。以及如何获得点击的A 元素的值？我试过了，但它带来了第一个 A 元素的值。我希望值在被点击时进入。

for example

<ul class="nav navbar-nav navbar-left" id="menuKategori">

@foreach (var item in Model.Take(6))
{
    <li><a href="/Home/_PartialKonular/@item.KategoriId" 
id="menu">#@item.KategoriAdi</a></li>


}

<li class="dropdown" id="menudropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>...</b> 
</a>
    <ul class="dropdown-menu">
       @{ 
           db_sozluk db = new db_sozluk();
           var gelenVeri = db.Kategoris.Where(x => x.KategoriId > 
6).ToList();
       }
        @foreach (var item in gelenVeri)
        {
            <li><a 
href="/Home/_PartialKonular/@item.KategoriId">@item.KategoriAdi</a></li>
        }


    </ul>
</li>

<script>
  $(document).ready(function () {
      $('#menuKategori li a').click(function () {
          var gelenVeri = $('#menu').text();

          $.ajax({
              url: '/Home/_PartialKonular/',
              data: { veri: gelenVeri },
              datatype: 'Json',
              type: 'Get'
          })
      })
  })
</script>

【问题讨论】：

标签的值是什么意思？标签是如何呈现的？不要张贴图片！发布呈现您的标记的相关代码
你能发布你的“试用代码”吗？
我上传了图片
“我试过了” ...向我们展示您尝试过的但无法按照 minimal reproducible example 工作的方法。如果没有一些代码，我们将无法帮助您了解问题所在

标签： jquery sql asp.net asp.net-mvc

【解决方案1】：

认为有无数种方法可以实现这一点，一种方法是使用data- 属性：

<a href="#" data-tab="tab">Tab 1</a>

来自 javascript

$("[data-tab]").click(function (event) {
    event.preventDefault()
    alert($(event.currentTarget).data("tab"));
});

您的代码中的主要问题是您没有在单击事件中实现event 参数。它应该看起来像这样：

$('#menuKategori li a').click(function (event) {
    var gelenVeri = $(event.currentTarget).text();
}

【讨论】：

虽然有些答案看起来更简单，只使用this，但当A 中有其他元素（如跨度）时，使用event.currentTarget 会更安全。如果您习惯使用 currentTarget，您将永远安全。

【解决方案2】：

我认为你的代码是错误的，这就是为什么你总是得到第一个“a”文本。

试试这个：

  $('#menuKategori li a').click(function () {
      var gelenVeri = $(this).text();

【讨论】：

【解决方案3】：

首先，您不应为循环中生成的项目硬编码id 值。如果您的 DOM 有多个具有相同 Id 值的元素，则该 html 无效。所以从循环中删除id="menu"

@foreach (var item in Model.Take(6))
{
    <li>
       <a href="/Home/_PartialKonular/@item.KategoriId">#@item.KategoriAdi</a>
    </li>
}

现在要获取点击的项目，您可以在click 事件中使用$(this)。因此，如果您尝试阅读文本，则可以使用 text 方法

$(document).ready(function () {
      $('#menuKategori li a').click(function (e) {
          e.preventDefault();
          alert($(this).text());          
      })
});

如果您想使用其他值（例如：KategoriId），您可以在您的a 标签上的 html5 数据属性中设置它，并在您的 click 事件中读取它

@foreach (var item in Model.Take(6))
{
    <li>
       <a  data-id="@item.KategoriId" href="/Home/_PartialKonular/@item.KategoriId">
                      @item.KategoriAdi
        </a>
    </li>
}

你会像这样阅读它

$(document).ready(function () {
      $('#menuKategori li a').click(function (e) {
          e.preventDefault();
          alert($(this).data("id"));          
      })
});

如果您尝试使用 KategoriId 值调用操作方法，您当然可以使用 Url.Action 帮助器为您生成 url。

  <a  data-id="@item.KategoriId" href="@Url.Action("PartialKonular","Home",new { veri=item.KategoriId})">
                      @item.KategoriAdi
 </a>

假设您的PartialKonular 有一个名为veri 的参数。现在对于您的 ajax 调用，您可以使用单击链接的 href 属性值

$(document).ready(function () {
      $('#menuKategori li a').click(function (e) {
         e.preventDefault();

         var url = $(this).attr("hred");          
         alert(url);

         $.get(url).done(function(response){
            alert("Response received from ajax call");
            console.log(response);
         });
      })
});

【讨论】：