EnjoyHint - 我可以在不指定元素的情况下获得提示吗？答案

【问题标题】：EnjoyHint - can I have a hint without specifying an element?EnjoyHint - 我可以在不指定元素的情况下获得提示吗？
【发布时间】：2020-05-25 17:10:10
【问题描述】：

我想在 EnjoyHint 中有一个介绍性提示，用户只需按“下一步”即可继续前进。所以没有指向元素的箭头。这可能吗？

【问题讨论】：

标签： enjoyhint

【解决方案1】：

HTML

<div class="hidden"></div>

var enjoyhint_script_steps = [
    {
        'click .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
        showSkip: false,
        showNext: true,
        margin: 0,
        onBeforeStart: function () {
            document.getElementsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'none';
        }
    },
    {
        onBeforeStart: function () {
             document.getElmentsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'block';
        },
        ...rest of step 2...
    }
    ...rest of steps...
];

说明

<div class="hidden"></div> 是 EnjoyHint 定位的空元素。

'click .hidden': '...description...' 定位空元素并添加描述。

showSkip: false 隐藏跳过按钮。

showNext: true 显示下一个按钮。

margin: 0 隐藏了 EnjoyHint 突出显示的区域。

onBeforeStart: function () {...}用于在第一步隐藏箭头，在第二步显示。

【讨论】：

非常感谢。我发现我必须小心放置空元素的位置，因为文本的位置取决于它。当用户单击“下一步”时，还会出现一个箭头。但它或多或少在那里。

【解决方案2】：

var enjoyhint_script_steps = [
{
    'next .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
    showSkip: false,
    showNext: true,
    onBeforeStart: function () {
        $('#enjoyhint_arrpw_line').hide();
    }
},
{
    ...rest of step 2...
}
...rest of steps...

];

说明

在分配“点击”事件时，有一个更好的解决方案，然后定位到隐藏的 div。

“点击”事件期望用户点击高亮元素以继续下一步，当您的元素被隐藏时，您无法点击它。

为了默认设置“下一步”按钮并让用户点击它，您需要使用“下一步”事件。

onBeforeStart 让您可以选择在此特定提示开始之前运行您想要的任何功能，因此您可以运行：

function () {
    $('#enjoyhint_arrpw_line').hide();
}

onBeforeStart 里面。当您这样做时，您可以突出显示页面上没有箭头的任何元素，并有一个强制性的“下一步”按钮。

如果它更具可读性，你也可以这样写：

    var enjoyhint_script_steps = [
    {
        event: 'next',
        selector: '.hidden', // or any element you want to highlight
        description: '<h2>Introduction</h2><p>This is an introductory sentence, which 
                      tells you a bit about everything.'</p>
        showSkip: false,
        showNext: true, // not necessary
        onBeforeStart: function () {
            $('#enjoyhint_arrpw_line').hide();
        }
    },
    {
        ...rest of step 2...
    }
    ...rest of steps...
];

【讨论】：

【解决方案3】：

您可以将div class="hidden" 设置为透明箭头

let enjoyhint_script_steps = [
            {
                'click .hidden': '<h2>Hello</h2>',
                arrowColor:'transparent'
            }
        ];

【讨论】：