0

現在、メニューからリンクの1つを選択すると、ハイパーリンクのテキストだけでなく非表示の値も変更されるドロップダウンメニューを作成しようとしています。これは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>

残念ながら、特定のエラーは返されませんが、コードは機能しません。助言がありますか？

4

2 に答える 2

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>
于 2012-10-24T10:30:35.260 に答える
0

これは最適化して再利用できるようになると思います。

まず第一に、あなたは$('.btn-group')非常に効果のないようにjQueryセレクターを使用しています。

次に、複数の「ウィジェット」を使用すると、コンテキストがドキュメント全体であり、そのクラスのすべての要素が検出されるため、破損します.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>

これで、これを使用して1つのページ内に複数のウィジェットを作成できます。:)

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

もちろん、「オプションリスト」の開閉、スクロール、そしておそらく他の多くのことなど、ここで行わなければならないことは他にもたくさんあります...

于 2012-10-24T12:35:56.967 に答える