javascript - 当单击另一个对象时，如何在 jQuery 中传递一个对象？

Question

我有一个像这样的html代码:

<input type="text" class="form-control" id="txtCopyright" placeholder="IN" />

<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"  style="border-radius:0"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
    <li><a>IN</a></li>
    <li><a>BEFORE</a></li>
    <li><a>AFTER</a></li>
    </ul>
</div>

其他输入组

<input type="text" class="form-control" id="txtOtherInput" placeholder="Other" />

<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"  style="border-radius:0"><span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown2" role="menu">
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    </ul>
</div>

我有一个像这样的 jQuery..

$('#myDropdown li').click(function () {
    $('#txtCopyright').val($(this).text());
});

$('#myDropdown2 li').click(function () {
   $('#txtOtherInput').val($(this).text());
});

它实际上对我有用..但问题是我只想在所有下拉菜单中使用一个 jQuery..它现在很容易使用，因为我只有 2 个下拉菜单，如果我有 20 个下拉菜单，那么我会设置 20 个 jQuery，我认为这是多余的..

我的想法是传递输入的 id，但如何做到这一点..

任何想法..

请帮帮我 谢谢。

Answer 1

应用类选择器并使用数据属性:

<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" data-control-id="txtCopyright" role="menu">
    <li><a>IN</a>
    </li>
    <li><a>BEFORE</a>
    </li>
    <li><a>AFTER</a>
    </li>
</ul>

然后点击li使用closest()或parent()获取父级 ul ，然后获取其 data-control-id 属性值，然后执行以下操作:

$('.dropdown-menu li').click(function () {
    $('#'+$(this).closest(".dropdown-menu").data("control-id")).val($(this).text());
});

或者:

$('.dropdown-menu li').click(function () {
        $('#'+$(this).parent(".dropdown-menu").data("control-id")).val($(this).text());
    });

演示:

FIDDLE EXAMPLE