javascript - 如何让单击链接填充出现在它之前的输入元素的值？

Question

我有以下内容:

<div class="btn-group">
    <input disabled="disabled" id="dialogType">
    <button data-toggle="dropdown" class="dropdown-toggle">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="towns">
        <li><a data-value="0Z" href="#">A</a></li>
        <li><a data-value="10" href="#">B</a></li>
    </ul>
</div>

<div class="btn-group">
    <input disabled="disabled" id="dialogStatus">
    <button data-toggle="dropdown" class="dropdown-toggle">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="places">
        <li><a data-value="22" href="#">C</a></li>
        <li><a data-value="33" href="#">D</a></li>
    </ul>
</div>

过去，当单击其中一个链接时，我使用以下 javascript 来填充#town 标签字段:

$('#towns > li > a').click(function (e) {
    e.preventDefault();
    $('#town').text($(this).html())
 });

现在，我想让这个 javascript 适用于 DIV 中具有类下拉菜单的任何类似 ul。

所以我想要的是:

• 当用户点击链接(例如 A)时，btn 组中的第一个输入元素将被赋予 A 的值以及“0Z”的数据值
• 当用户点击诸如 D 之类的链接时，该 btn 组中的第一个输入元素将被赋予 D 的值以及数据值“33”

谁能告诉我如何做到这一点。我只需要上面函数的更通用版本。.

Answer 1

我建议，尽管目前未经测试:

$('.dropdown-menu a').click(
    function(e){
        e.preventDefault();
        var that = $(this),
            dValue = that.attr('data-value');
        that.closest('.btn-group').find('input:first').attr('data-value',dValue).val(dValue);
    });

本质上它的工作方式是:

1. 点击链接会阻止默认操作，
2. 找到最近的 .btn-group (祖先)元素，
3. 找到第一个后代 input内的元素，
4. 分配 data-value (分配给 dValue 变量)到 data-value的属性 input , 最后
5. 分配 dValue 的值成为value其中input .

---

编辑以回应 OP 留下的评论:

...I will have more HTML with button groups loaded with Ajax. Sorry I should have said that. Because of that should I also use "on"...

因为 btn-group元素是动态添加的，我建议进行以下更改:

$('#idOfBtnGroupParentElement').on('click','.dropdown-menu a',
    function(e){
        e.preventDefault();
        var that = $(this),
            dValue = that.attr('data-value');
        that.closest('.btn-group').find('input:first').attr('data-value',dValue).val(dValue);
    });

引用资料:

• > attr() .
• > closest() .
• > find() .
• > on()
• > val() .