javascript - Jquery将html值附加到输入框，但不附加跨度内的文本

Question

我有一个 ajax 查询，它返回搜索到的名称和 ID:

if($result)
{
    while($row=mysqli_fetch_array($result))
    {
    extract($row);
    echo "<li>".$row['first_name']." ".$row['last_name']."<span class='uid'>".$row['user_id']."</span></li>";
    }
}

我想要做的是将名字和姓氏附加到搜索框中，然后检索用户 ID 并将其放在另一个搜索框中。

$('li').click(function(){
    $('.client_name').not('span.uid').val($(this).text());
    $('.listbox').hide();
    });

上面的 jquery 不起作用，因为我觉得我错误地使用了“not”属性。是否可以拆分这些值？

html如下

<div class="form_align">
        <label>
        Client Name
        </label>
        <input type="text" class="client_name" />

        <label>
        Client Account No.
        <span class="small">This is important !</span>
        </label>
        <input type="text" class="client_account_no" />
        <div class="listbox">
            <div class="nameslist">
            </div>
        </div>
        </div>

Answer 1

我建议更改 AJAX 响应，将名称括在自己的 <span class='ajaxname'> 中。 。这将使将名称与同级节点 <span class='uid'> 分开定位变得更加简单。 。否则，排除 <span class='uid'> 的值你需要做一些棘手的事情，比如暂时从 DOM 中删除它来获取 <li>的文本，然后将其放回原处。太复杂了。

echo "<li><span class='ajaxname'>".$row['first_name']." ".$row['last_name']."</span><span class='uid'>".$row['user_id']."</span></li>";

由于 AJAX 响应发送了新的 <li>进入你的 DOM，你需要使用 .on() 绑定(bind)点击事件。

$('li').on('click', function(){
    // Get the name from its <span> and put it into the input
    $('.client_name').val($(this).find('.ajaxname').text());
    // Get the uid and put it inot .client_account_no
    $('.client_account_name').val($(this).find('.uid').text());
    $('.listbox').hide();
});

你知道什么，it works (jsfiddle) .

附录:

其他答案从未实现，所以这里有一个可以说更好的解决方案，使用 data-uid AJAX 返回的 HTML 中的属性

// PHP supplies the user_id in an HTML attribute data-uid
echo "<li data-uid='" . $row['user_id'] . "'>".$row['first_name']." ".$row['last_name'] . "</li>";

JavaScript 的工作要容易得多:

$('li').on('click', function(){
    // Get the name, which is just the <li>'s text content...
    $('.client_name').val($(this).text());
    // Get the uid from the data-uid attribute
    $('.client_account_name').val($(this).attr('data-uid'));
    $('.listbox').hide();
});