javascript - 当它返回到第一次出现时发出警报
问题描述
我正在使用 markjs 插件,特别是带有跳转到匹配示例的搜索栏
有一个带有输入的顶部栏,我们输入文本并单击搜索。该插件突出显示单词,然后我们跳转到带有按钮的匹配项。
我想在它返回第一次出现时做一个简单的 javascript 警报,我该怎么做?
JS代码:
$(function() {
// the input field
var $input = $("input[type='search']"),
// clear button
$clearBtn = $("button[data-search='clear']"),
// prev button
$prevBtn = $("button[data-search='prev']"),
// next button
$nextBtn = $("button[data-search='next']"),
// the context where to search
$content = $(".content"),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 50,
// the current index of the focused element
currentIndex = 0;
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results.eq(currentIndex);
$results.removeClass(currentClass);
if ($current.length) {
$current.addClass(currentClass);
position = $current.offset().top - offsetTop;
window.scrollTo(0, position);
}
}
}
/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.on("input", function() {
var searchVal = this.value;
$content.unmark({
done: function() {
$content.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.find("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
/**
* Clears the search
*/
$clearBtn.on("click", function() {
$content.unmark();
$input.val("").focus();
});
/**
* Next and previous search jump to
*/
$nextBtn.add($prevBtn).on("click", function() {
if ($results.length) {
currentIndex += $(this).is($prevBtn) ? -1 : 1;
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
});
});
解决方案
推荐阅读
- java - 首次启动时显示指令弹出窗口
- xml - 通过模式进行 XML 验证
- naming - 如何命名同一事物的两个类,一个复数和一个单数
- php - 在 Laravel 中创建谷歌地图,
- search - Substr - Power BI 中的 Instr 函数错误
- ruby-on-rails - Gem 安装错误版本的 bundler
- javascript - 如何在 VueJS 中读取 Firebase 数据?
- javascript - 递归函数类型如何推导流程?
- javascript - onChange 输入类型[复选框] 不适用于 Vue 样式的组件
- python - 使用 Python3.7 进行网页抓取:ConnectionError: HTTPSConnectionPool(host='www.google.com', port=443):