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() .