2

我有以下内容：

<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”的数据值

有人能告诉我我怎么能做到这一点。我只需要上述函数的更通用版本。.

4

5 回答 5

4

我建议，虽然目前未经测试：

$('.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-valuethat 的属性，input最后
  5. 将 的 值指定dValue为valuethat 的input。

针对OP留下的评论进行编辑：

...我将有更多带有 Ajax 加载的按钮组的 HTML。对不起，我应该这么说。因此，我是否也应该使用“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);
    });

参考：

于 2012-04-16T14:14:58.577 回答
1

您可以使用.closest来查找与给定选择器匹配的单击元素的最近父级。

要设置输入的值，请使用.val，要设置数据属性，请使用.data

$('.btn-group a').click(function(e) {
   e.preventDefault();
   var input = $(this).closest('.btn-group').find('input');

   input.val($(this).html());
   input.data('value', $(this).data('value'));
});
于 2012-04-16T14:13:58.440 回答
0

这应该可以解决问题...

$(".dropdown-menu a").click(function(e){
   e.preventDefault();

   var value = $(this).data("value");
   var text = $(this).html();

   var input = $(this).parents(".btn-group").find("input");

   input.data("value", value);
   input.val(text);
});
于 2012-04-16T14:14:45.413 回答
0

我猜这和他们一样通用。我使用代表是因为我不知道你有多少这些a元素。

$('.btn-group').on('click', '.dropdown-menu a', function (e) {

    var $this = $(this),
        $input = $this.closest('.btn-group').find('input:first')
        ;
    e.preventDefault();

    $input.val($this.html())
          .attr('data-value', $this.attr('data-value'))
          ;        
});

请注意我正在使用.on，因此您应该使用 jQuery 1.7 或更高版本来使用它。如果没有，请查看如何使用delegate.

于 2012-04-16T14:16:54.843 回答
0 
$('ul.dropdown-menu a').on('click', function(e) {
  e.preventDefault();
  $(this).parent().parent().parent().find('input:first').val($(this).text()).attr('data-value', $(this).attr('data-value'));
});
于 2012-04-16T14:27:07.080 回答