2

私は1列のテーブルとそのTDにポップオーバークラスがあります。したがって、その TD では、ボタンをクリックすると、以下に示すように入力を指定するよう求められます。

ここに画像の説明を入力

ご覧のとおり、チャート ボタンはその TD のポップオーバーをトリガーし、ポップオーバーには 2 つの入力があります。

したがって、私のシナリオは、その入力値をポップオーバーに追加して、「ベンチマークが指定されていないラベル」の div にコピーすることです。では、ポップオーバーが作成または開始した TD または親を特定するにはどうすればよいでしょうか。保存ボタンをクリックしたときにポップオーバーの作成者を特定する方法をより明確にします。

コード

$('.main-attributes').popover({
    html: true,
    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    title: function () {


        return $(this).find('.attribute-title').html() + " - Score Range"
    },
    content: function () {

        var H = $('#div_scoreselector');

        return $(H).html();
    }
})
$('.manage-range').on('click', function (e) { //.manage-range is the chart button as shown in image which opens the popup
    var ma = $(this).parents('.main-attributes');
    $('.main-attributes').not(ma).popover('hide');
    $(ma).popover('toggle');
    e.stopPropagation();
});

スコア セレクタ DIV

<div class='hidden' id='div_scoreselector'>
    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="row div-scorerange">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">
                                From</label>
                            <input placeholder="Low Score" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">
                                To</label>
                            <input placeholder="High Score" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-md-6 col-md-offset-6">
                        <button class="btn-dark-grey btn">
                            CANCEL</button>
                        <button class="btn btn-red">
                            SAVE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
4

2 に答える 2