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を使用して、リンクの1つがクリックされたときに#townラベルフィールドに入力しました。

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

ここで、このjavascriptを、クラスのドロップダウンメニューを使用してDIV内にある同様のulに対して機能させたいと思います。

だから私が欲しいのは：

  • ユーザーがAなどのリンクをクリックすると、btn-group内の最初の入力要素にAの値と、「0Z」のデータ値が与えられます。
  • ユーザーがDなどのリンクをクリックすると、そのbtn-group内の最初の入力要素に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. (変数に割り当てられた) を that の属性data-valueに割り当て、最後にdValuedata-valueinput
  5. の値を thatのdValueに割り当てます。valueinput

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 に答える