Jquery 将引导popover输入值绑定到拥有popover的元素

我有一个单列表，它的TDs有一个popover类。因此，在这种情况下，当点击按钮时，会要求指定输入，如下所示

如您所见，图表按钮触发该TD的popover，popover上有2个输入

因此，我的场景是将输入值附加到popover中，以便复制到div中，其中“没有指定基准标签”。因此，我如何确定popover为哪个TD或哪个父级创建或启动。当我点击save按钮时，更清楚地知道如何确定Popover的创建者

代码

$('.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>

从…起
到

取消
拯救

假设您有多个元素具有以下通用方式的main attributes类：

<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 1</button>
</div>
<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 2</button>
</div>
... etc.

超出.manage范围单击处理程序为保存按钮设置单击事件，如下所示：

// Assuming you have a .save class on the Save button
$(document).on('click', '.save', function () {
    var $context = $(this).data('context');
    var fromval = $('.popover #fromvalue').val();
    var toval = $('.popover #tovalue').val();
    // Now get the text container relative to the $context passed in
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval);
});

---

下面是一个粗略的例子：

假设您有多个元素，其中的main attributes类采用以下通用方式：

<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 1</button>
</div>
<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span>
    <button class="manage-range">Chart Button 2</button>
</div>
... etc.

超出.manage范围单击处理程序为保存按钮设置单击事件，如下所示：

// Assuming you have a .save class on the Save button
$(document).on('click', '.save', function () {
    var $context = $(this).data('context');
    var fromval = $('.popover #fromvalue').val();
    var toval = $('.popover #tovalue').val();
    // Now get the text container relative to the $context passed in
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval);
});

---

这是一把粗糙的小提琴：

很抱歉从坟墓里挖出了这个，但一个更优雅、更干净的解决方案是

$('.main-attributes').popover({
    html: true,
    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    title: 'My Popover',
    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
    $(this).prev('.text-container').attr('id', 'mainattr'); //Add an ID to the previous .text-container
    var ma = $(this).parents('.main-attributes');
    $('.main-attributes').not(ma).popover('hide');
    $(ma).popover('toggle');
    e.stopPropagation();
});

$('.main-attributes').on('shown.bs.popover', function () {
    $('.save').click( function() {
        var fromval = $('.popover #fromvalue').val();
        var toval = $('.popover #tovalue').val();
           $('#mainattr').text('From: ' + fromval + ' To: ' + toval).removeAttr('id'); //Add the Values from Popover and then remove the ID we set.
        $('.main-attributes').popover('hide');
    });
});

---

很抱歉把这个从坟墓里挖出来，但一个更优雅、更干净的解决方案是

$('.main-attributes').popover({
    html: true,
    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    title: 'My Popover',
    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
    $(this).prev('.text-container').attr('id', 'mainattr'); //Add an ID to the previous .text-container
    var ma = $(this).parents('.main-attributes');
    $('.main-attributes').not(ma).popover('hide');
    $(ma).popover('toggle');
    e.stopPropagation();
});

$('.main-attributes').on('shown.bs.popover', function () {
    $('.save').click( function() {
        var fromval = $('.popover #fromvalue').val();
        var toval = $('.popover #tovalue').val();
           $('#mainattr').text('From: ' + fromval + ' To: ' + toval).removeAttr('id'); //Add the Values from Popover and then remove the ID we set.
        $('.main-attributes').popover('hide');
    });
});

---

你能在@Reigel上显示代码或制作小提琴吗？我已经编辑了问题以添加代码。。请看一看。谢谢，请显示代码，或者在@Reigel上制作一把小提琴。我已经编辑了问题以添加代码。。请看一看。谢谢