如何在 li ul 中获取跨度动态值

How to get span dynamic value inside li ul

本文关键字：动态 获取 li ul      更新时间：2023-09-26

我的ASPX代码如下所示：

<ul id="userlist">
    <a class="s-test">
        <li>
            <span id="userlistspan" class="tt-User" value="1">Cardiologist</span>
            <span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
        </li>
    </a>
    <a class="s-test">
        <li>
            <span id="userlistspan" class="tt-User" value="2">Cardio</span>
            <span id="userlistspan1" class="tt-Userss">SPECIALITY</span>
        </li> 
    </a>
</ul>

我尝试过的jQuery是这样的：

$('#userlist li #userlistspan').click(function () {
    $('#txtSearch').val($(this).text());
})
//here am getting text like Cardio

我怎样才能从span中获得像value=2这样的价值？

您的 HTML 完全无效，原因如下：

  • 不能将 a 元素作为 ul 的直接子元素。li必须是子元素。
  • 当id在同一文档中应该是唯一的时，您具有重复的id属性，请改用类对元素进行分组。
  • span元素没有 value 属性，如果要使用元素存储自定义数据，请使用 data-* 属性。
  • a 元素必须具有 href 或 name 属性，但在这种情况下使用它们似乎是多余的，因此您可以删除它们。

您需要先解决所有这些问题：

<ul id="userlist">
    <li>
        <span class="userlistspan tt-User" data-value="1">Cardiologist</span>
        <span class="userlistspan1 tt-Userss">SPECIALITY</span>
    </li>
    <li>
        <span class="userlistspan tt-User" data-value="2">Cardio</span>
        <span class="userlistspan1 tt-Userss">SPECIALITY</span>
    </li> 
</ul>

从那里，您可以将单击处理程序附加到 .userlistspan 类，并使用 this 关键字引用引发事件的元素。然后可以使用 data() 方法来获取data-value，如下所示：

$('#userlist li .userlistspan').click(function() { 
    var $span = $(this);
    $('#txtSearch').val($span.text());
    var value = $span.data('value'); // = 1 or 2, depending on which element you clicked.
})
相关文章：