Question

我正在使用noUislider作为滑块。我想做的一件事是，将鼠标悬停在手柄上，您可以拥有一个弹出框，单击它时，弹出框内将发生另一种动作。如何在滑块内部定位特定的句柄noUi-handle noUi-handle-lower，以触发弹出窗口？

要澄清一下：此滑块的手柄下部是滑块中的嵌入式子代。

<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')});

Answer 1

应该执行以下操作：

// 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
}

我不会为您制作“弹出式” HTML，因为这实际上可以是任何事情。我建议为此使用insertAdjacentHTML。祝你好运。

Answer 2

我想出了要怎么做，所以我将在这里详细介绍。

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

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

noUiSlider不会加载所有内容，直到找到滑块并确认在那里，使其他脚本事件成为可插入电缆。

我要做的下一件事是找到类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);   
    }

然后我确保初始化ID的状态

$('#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')});

将它们放在一起：

$( 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')});
});

那应该做。

将弹出框放在noUiSlider手柄上

2 个答案: