javascript - 如何获取li ul内的span动态值

Question

我的 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 之类的值？

Answer 1

由于以下几个原因，您的 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.
})