Question

我目前正在尝试创建一个下拉菜单，从菜单中选择一个链接将更改隐藏值以及超链接的文本。这是基于Twitter的Bootstrap下拉列表，并使用jQuery：

<div id="periodChooser" class="btn-group">
   <input type="hidden" value="1" name="dtype" id="dtype1"></input>
   <a data-toggle="dropdown" href="javascript:;">Weekend</a>  
   <ul class="dropdown-menu">
      <li><a href="javascript:;" data-value="1">Weekend</a></li>
      <li><a href="javascript:;" data-value="2">Week</a></li>
      <li><a href="javascript:;" data-value="3">Midweek</a></li>
   </ul>
</div>

我试图编写的脚本如下：

<script>
jQuery(function($){
    $('#periodChooser').each(function() {
        $('.dropdown-menu a').click(function() {
            $('.btn-group').find('input[type=hidden]').val($(this)
                    .data('value')).change();
            $('.btn-group').find('.btn:eq(0)').text($(this).text());
        });
    });         
});
</script>

不幸的是，虽然它没有返回任何特定错误，但代码不起作用。有什么建议吗？

Answer 1

将事件绑定到每个

<script>
       $('#periodChooser .dropdown-menu a').click(function() {
            $('.btn-group').find('input[type=hidden]').val($(this)
                    .data('value')).change();
             $('.btn-group').find('.btn:eq(0)').text($(this).text());
     });
</script>

Answer 2

我认为这可以进行优化并使其更易于重复使用。

首先，你使用jQuery选择器，如$('.btn-group')非常无效。

其次它会破坏，如果你将使用多个“小部件”，因为上下文是整个文档，它将找到该类.btn-group的所有元素。

第三，使用绑定到父<ul>元素而不是每个<a>元素的单个事件处理程序会更有效。它被称为“事件委托”。 http://api.jquery.com/delegate/

<script>
$('#periodChooser').each(function() {
    var $input = $('input', this),
        $select = $('>a', this);

    $('ul', this).on('click', 'a', function() {
        var $this = $(this);

        $input.val($this.data('value')).change();
        $select.html($this.html());
    });
});
</script>

我在JSBin中提供了这段代码：http://jsbin.com/welcome/38724/edit

我在这做了什么？

<script>
$('#periodChooser').each(function() {
    // Find and store input and "select" element only once.
    var $input = $('input', this),
        $select = $('>a', this); // This finds only direct child element <a>

    // Find the <ul> element inside the #periodChooser
    // Bind a click event that will "bubble up" from <a> elements that are children of it
    $('ul', this).on('click', 'a', function() {
        // Wrap a jQuery around the <a> element
        var $this = $(this);

        // Set the input value and execute "change" event(s)
        $input.val($this.data('value')).change();

        // Change the "select" title. Doesn't matter if you use html() or text() - choose yourself!
        $select.html($this.html());
    });
});
</script>

现在，您可以使用它在单页内制作多个小部件！：）

<script>
$('.btn-group').each( /* Well, you know, the function goes here... */ );
</script>

当然，还有许多其他事情需要在这里完成，例如打开和关闭“选项列表”，滚动以及可能还有很多其他事情......

如何更改隐藏值和文本

2 个答案: