javascript - 单击列表时显示所有数据以及图像/图标

Question

上面是下拉列表，当单击列表时，其值将与图像一起显示在上面的字段(顺便说一句，这是一个按钮)中。我已经实现了显示文本，但似乎无法显示图像。这是我的标记如下...

<button type="button" onclick="showbanks(); return false;" name="button" class="banknam btn dropdown-toggle center-right glyph form-control d-inline-block" data-toggle="dropdown-menu" aria-haspopup="true" aria-expanded="false">广东</button>
    <ul class="dropdown-menu menu-banknam">
    @foreach (array_slice($chosen_bank,0,5) as $index =>$bank)
        <li value="{{$bank}}" onclick="clickbanks(); return false;">
            <span class="bankimg d-inline-block"><img src="{{ asset($chosen_bankimg[$index]) }}" alt=""></span>
            <span class="bank_nam d-inline-block">{{ $bank }}</span>
        </li>
    @endforeach
    </ul>

...以及我的功能...

function clickbanks(){
    $(".menu-banknam li").click(function(){
        $(this).parents(".bb-container").find('.banknam').html($(this).text());
        return false;
    });
}

有什么办法可以实现这一点吗？谢谢。

Answer 1

使用.html()而不是.text()获取 li 的全部内容，而不仅仅是文本。

例如

$(this).parents(".bb-container").find('.banknam').html($(this).html());

每次单击 li 时，您还会为其分配一个新的单击事件。

您应该删除 clickbanks 函数，并在文档准备好时分配一次点击事件。您还必须将其从 li 的 onclick 属性中删除。

例如

$(function() {
  $(".menu-banknam li").click(function() {
    $(this).parents(".bb-container").find('.banknam').html($(this).text());
    return false;
  });
});