Question

我想使用country-＆gt; region-＆gt;城市选择创建下拉列表。第一个ul打开，点击该跨度，其他设置为悬停时显示（代码位于底部）。

<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
    <li class="dropdown-location-li">
        <strong>Deutschland</strong>
        <ul class="dropdown-location-ul" style="display:none;">
            <li class="dropdown-location-li">
                <strong>Brandenburg</strong>
                <ul class="dropdown-location-ul" style="display:none;">
                    <li class="dropdown-location-li">
                        <strong>Oranienburg</strong>
                    </li>
                    <li class="dropdown-location-li">
                        <strong>Schwedt</strong>
                    </li>
                    ...
                </ul>
            </li>
            <li class="dropdown-location-li">
                <strong>Berlin</strong>
            </li>
            ...
        </ul>
    </li>
    <li class="dropdown-location-li">
        <strong>France</strong>
    </li>
    ...
</ul>

$('.dropdown-location-li').hover(function(){
    $(this).children('ul').css('left', $(this).parent('ul').width()+'px');
    $(this).children('ul').show();
}, function(){
    $(this).children('ul').hide();
});

这个工作正常，现在我需要点击以将附近输入的值更改为强标记内的位置名称。我尝试了下面的代码，但似乎$（这）选择元素和他所有的父母，但我需要从我点击的那个获取位置。请告诉我如何正确地做到这一点？也许我有完全错误的做法，需要用id和东西制作所有，但我只是想减少重复js的数量。

$('.dropdown-location-li').click(function(){
    $('#srch-area').val($(this).children('strong').text());
    $('#dropdown-country').hide();
});

这是它在控制台中的显示方式。正如你所看到的，当我点击Oranienburg时它会选择Brandenburg和Deutschland，这些是我点击的元素的父母。 console screenshot

Answer 1

您有嵌套的.dropdown-location-li元素，因此点击不断传播到其他LI元素，再次触发事件处理程序等。
你应该第一次停止传播

$('.dropdown-location-li').click(function(e){
    e.stopPropagation();

    $('#srch-area').val($(this).children('strong').text());
    $('#dropdown-country').hide();
});

Answer 2

尝试使用JQuery Find

$（本）.find（＆＃39;强＆＃39）。文本（）

如何在具有相同类的子元素上使用带有$（this）的click函数？

2 个答案: