0

現在、プロジェクトで条件付きルールのオプションを作成しようとしています。ユーザーがドロップダウンでさまざまなオプションを選択でき、フォルダーが動的に入力される方法を決定するスマートフィルターシステム (電子メールに似ています) をセットアップしようとしています。

この条件付き機能を備えた多くのプログラムを見てきました。Twitter Bootstrap プロジェクトでそれを再作成したいと思っていますが、フロントエンドで Add(+) および Minus (-) 機能を動作させる方法がわかりません。

  1. このタイプの機能を実行するプラグインが既に存在するかどうか疑問に思っていますか?

  2. そうでない場合は、JavaScript / jQuery の実装でこれを行うための助けを得たいと思っています。

ここにベースの HTML と CSS を置いたので、私が何をしようとしているのかがわかります。

デモ: http://jsfiddle.net/y7CwE/1/

注: デフォルトでは、常に 1 行あります (最初の行にはそれを削除するためのマイナス記号がなく、後続の行のみがメニュー機能を持っています)。

<p>Please Create the following rules for your group</p>
<ul id="conditionRow-1">
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</ul>

<ul id="conditionRow-2">
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
<a href="#" data-toggle="tooltip" title="Remove Rule"><i class="icon-minus"></i></a>
</ul>
4

2 に答える 2

1

Little amendsリンクは の外側に配置しないでくださいli:

<p>Please Create the following rules for your group</p>
<ul>
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<li> 
    <a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</li>
</ul>

jQuery:

$(document).ready(function () {
    $("a").tooltip();
    var add = true;
    $(document).on('click', '.icon-plus', function () {
        var $clone = $(this).closest('ul').clone();
        $clone.insertAfter($(this).closest('ul'));
        if(add==true){
            $clone.last('li').append('<a href="#" data-toggle="tooltip" title="remove this"><i class="icon-minus"></i></a>');
            add=false;
        }
    });
    $(document).on('click', '.icon-minus', function () {
       $(this).closest('ul').remove();
    });
});

ここで更新された4番目のフィドルをチェックアウトしてください

于 2013-02-16T11:29:15.063 に答える
1

文字列宣言ですべてをぶち壊すのではなく、動的コンテンツをロードするためにjQuery の loadメソッドを使用することをお勧めします (更新するのは悪夢です)。

$('.add').on('click', function() {
   var new_id = parseInt($('ul[id*=conditionRow').length) + 1;
   var selector = 'conditionRow-' + new_id;
   $(this).before('<ul id="' + selector + '"></ul>');
   $(selector).load('/path/to/load/script');
});

$('.remove').on('click', function() {
   if (confirm("Are you sure?")) {
      $(this).parents('ul').remove();
   }
});

ロード スクリプトでは、HTML ファイルを出力するだけです。

<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
<a href="#" data-toggle="tooltip" title="Remove Rule"><i class="icon-minus"></i></a>

load 呼び出しでパラメータを渡して、HTML をもう少し動的にすることもできます。

于 2013-02-16T11:18:40.313 に答える