Javascript 把popover放在noUiSlider手柄上

我正在使用noUislider作为滑块。我想做的一件事是，在悬停手柄时，你可以拥有一个弹出框，单击它，弹出框内的另一个动作就会发生。我如何瞄准滑块内部的特定手柄（noUi handle noUi handle lower）来触发popover

澄清：此滑块的控制柄下部是滑块中嵌入的子对象

<div id="slider1" style="width: 400px; margin: 0px auto 30px;" class="noUi-target noUi-ltr noUi-horizontal" data-placement="right" data-toggle="popover1" data-original-title="" > <div class="noUi-base"><div class="noUi-connects"></div><div class="noUi-origin" style="transform: translate(-100%, 0px); z-index: 5;">
<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="0.0" aria-valuetext="0.00"></div></div>
<div class="noUi-origin" style="transform: translate(0%, 0px); z-index: 4;"><div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="100.0" aria-valuetext="100.00"></div></div></div></div>

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('sliderx1')});

$（#slider1.noUi handle noUi handle lower'）.popover（{trigger:“manual”，container:“body”，title:“Hello”，content:“Test”}）
.on（'mouseenter'，function（）{enterShow（'slider1'）}）
.on（'mouseleave'，function（）{exitHide（'slider1'）}）
.on（'click'，function（）{clickToggle（'sliderx1'）}）；

像这样的东西应该可以做到：

// target the particular handle    
const handle = document.querySelector('.noUi-handle noUi-handle-lower');

handle.onmouseenter = function () {
    // code to insert popover HTML goes here
}

handle.onmouseleave = function () {
    // code to remove popover HTML goes here
}

---

我不会为你做“popover”HTML，因为它可以是任何东西。我建议使用这个。祝你好运。

我想出了如何做我要求的事情，因此我将在这里详细介绍

首先，您需要确保您拥有document.ready代码，因为我们将帮助您查找句柄

$( document ).ready(function() {
    console.log( "ready!" );
});

noUiSlider不会加载所有内容，直到找到滑块并确认其存在，从而使其他脚本事件难以处理

接下来我要做的是找到类no-noUi-handle的每个实例noUi-handle-lower，并根据它们的id标记每个句柄

$('div.noUi-handle.noUi-handle-lower').attr('data-placement','right');
for (qwr =0; qwr < $('div.noUi-handle.noUi-handle-lower').length; qwr++){
    var holdid = $('div.noUi-handle.noUi-handle-lower').eq(qwr).parent().closest("div[id]")[0].id;
    //console.log(holdid);
    holdid = holdid.replace("nslider", "slider");
    //console.log(holdid);
    $('div.noUi-handle.noUi-handle-lower').eq(qwr).attr('id',holdid);   
    }

最后，我放置了我的引导信息

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('slider1')});

总而言之：

$( document ).ready(function() {
    console.log( "ready!" );
$('div.noUi-handle.noUi-handle-lower').attr('data-placement','right');
for (qwr =0; qwr < $('div.noUi-handle.noUi-handle-lower').length; qwr++){
    var holdid = $('div.noUi-handle.noUi-handle-lower').eq(qwr).parent().closest("div[id]")[0].id;
    //console.log(holdid);
    holdid = holdid.replace("nslider", "slider");
    //console.log(holdid);
    $('div.noUi-handle.noUi-handle-lower').eq(qwr).attr('id',holdid);   
    }
$('#slider1').data('state', 'hover');

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('slider1')});
});

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
$（'div.noUi-handle.noUi-handle lower'）.attr（'data-placement'，'right'）；
对于（qwr=0；qwr<$（'div.noUi-handle.noUi-handle-lower'）。长度；qwr++）{
var holdid=$（'div.noUi-handle.noUi-handle-lower'）.eq（qwr.parent（）.closest（'div[id]'）[0].id；
//console.log（holdid）；
holdid=holdid.replace（“nslider”、“slider”）；
//console.log（holdid）；
$（'div.noUi-handle.noUi-handle-lower'）.eq（qwr.attr（'id'，holdid）；
}
$（'#slider1'）。数据（'state'，'hover'）；
$（#slider1.noUi handle noUi handle lower'）.popover（{trigger:“manual”，container:“body”，title:“Hello”，content:“Test”}）
.on（'mouseenter'，function（）{enterShow（'slider1'）}）
.on（'mouseleave'，function（）{exitHide（'slider1'）}）
.on（'click'，function（）{clickToggle（'slider1'）}）；
});

---

应该可以。

我尝试过使用查询选择器，但它无法识别当前使用的滑块。

$( document ).ready(function() {
    console.log( "ready!" );
$('div.noUi-handle.noUi-handle-lower').attr('data-placement','right');
for (qwr =0; qwr < $('div.noUi-handle.noUi-handle-lower').length; qwr++){
    var holdid = $('div.noUi-handle.noUi-handle-lower').eq(qwr).parent().closest("div[id]")[0].id;
    //console.log(holdid);
    holdid = holdid.replace("nslider", "slider");
    //console.log(holdid);
    $('div.noUi-handle.noUi-handle-lower').eq(qwr).attr('id',holdid);   
    }
$('#slider1').data('state', 'hover');

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('slider1')});
});