- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试提升我的 JS 知识,因此我正在尝试将 JQuery 代码转换为 JavaScript。在此我不知道在哪里调用 x function(){which is in comment}。想要将工具提示添加到 JavaScript 而不是 JQuery。我尽力将 JQuery 代码转换为“vanilla”JS,但犯了一些错误。你能告诉我我哪里错了吗?
var persons = [{
firstname: "Malcom",
lastname: "Reynolds",
id: 1
}, {
firstname: "Kaylee",
lastname: "Frye",
id: 2
}, {
firstname: "Jayne",
lastname: "Cobb",
id: 3
}, {
firstname: "Mal",
lastname: "Rlds",
id: 4
}, {
firstname: "ylee",
lastname: "ye",
id: 5
}, {
firstname: "yne",
lastname: "Cb",
id: 6
}, {
firstname: "Mal",
lastname: "Rolds",
id: 7
}, {
firstname: "lee",
lastname: "Fryedwwwwd",
id: 8
}, {
firstname: "Jay",
lastname: "bdwe",
id: 9
}, {
firstname: "Maljh",
lastname: "Rolds",
id: 10
}, {
firstname: "ljyyu",
lastname: "jhjFryed",
id: 11
}, {
firstname: "ryJay",
lastname: "jkmCdwe",
id: 12
}, {
firstname: "yuryMal",
lastname: "jhkhRolds",
id: 13
}, {
firstname: "rtulee",
lastname: "Frwwd",
id: 14
}, {
firstname: "ryuyJay",
lastname: "Cryyobbdwe",
id: 15
}];
var start = 1;
var size = 5;
var current = 0;
function getFullName(item, index) {
return "<li>" + item.firstname + "<span class='tool-tip'>" + item.lastname + "</span> " + item.id + "</li>";
}
var getFullNameForHighlighting = function(searchText) {
return function(item, index) {
var index = item.firstname.toUpperCase().indexOf(searchText.toUpperCase())+searchText.length;
console.log(index)
return "<li>" + "<span class='highlight'>"+searchText + "</span>" +item.firstname.substring(index) + "<span class='tool-tip'>" + item.lastname + "</span> " + item.id + "</li>";
}
};
function myFunction1(){
current = size;
document.getElementById("myUL").innerHTML = persons.map(getFullName).slice(start, current).join('');
}
function myFunction() {
current = size;
var input, filter, ul, li, a, i, count = 0;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
var longWords = persons.filter(function(person) {
return person.firstname.toUpperCase().indexOf(filter) > -1
});
var message = "Result:" + longWords.length + " words containing '" + input.value;
document.getElementById("demo").innerHTML = message;
ul = document.getElementById("myUL");
varInnerHtmlText = longWords.map(getFullNameForHighlighting(filter));
ul.innerHTML = varInnerHtmlText;
highlight();
}
function highlight() {
var inputText, filter1, innerHTML, index;
inputText = document.getElementById("myInput");
console.log(inputText);
filter1 = inputText.value.toUpperCase();
console.log(filter1);
innerHTML1 = inputText.innerHTML;
var ul = document.getElementById("myUL");
console.log(innerHTML1);
index = innerHTML1.indexOf(filter1);
if (index >= 0) {
innerHTML1 = innerHTML1.substring(0, index) + "<span class='highlight'>" + innerHTML1.substring(index, index + filter1.length) + "</span>" + innerHTML1.substring(index + filter1.length);
filter1.innerHTML = innerHTML1;
}
}
var x = 0;
function myFunction3(e) {
console.log(e);
document.getElementById("demo").innerHTML = ++x;
}
* {
box-sizing: border-box;
}
#myInput {
width: 50%;
font-size: 14px;
padding: 8px 10px 8px 5px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-top: 20px;
}
#clear {
margin-left: 20px;
margin-top: 40px;
font-size: 14px;
margin-right: 50px;
padding: 4px 4px 4px 4px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 8px;
text-decoration: none;
font-size: 16px;
color: black;
display: block;
width: 100%;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
body {
margin: 0;
}
.column {
float: left;
margin-top: 50px;
padding: 10px;
height: 550px;
}
.left {
width: 20%;
}
.right {
width: 60%;
}
.row:after {
content: "";
display: table;
clear: both;
}
ul.demo {
display: inline-block;
border-bottom: 1px dotted black;
}
ul.demo li {
position: right;
}
.tool-tip {
display: none;
width: 100px;
background-color: white;
color: #fff;
text-align: center;
border-radius: 2px;
position: absolute;
z-index: 1;
color: black;
}
.highlight {
font-weight: bold;
color: black;
}
li em {
background: #ff6;
font-weight: bold;
font-style: normal;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.jscroll.js"></script>
<script src="two.js"></script>
<body onload="myFunction1()">
<br>
<br>
<div class="row">
<div class="column left" style="background-color:White;"></div>
<div class="column right" style="background-color:#bbb;">
<form id="myForm" onsubmit='return onSubmit(this)'>
Find:
<input type="text" class="demo1" id="myInput" align="center" onkeyup="myFunction()" placeholder="Search here...">
<button id="clear" onclick="document.getElementById('myInput').value = ''"> Clear </button>
</form>
<br>
<ul id="demo">
15 words total
</ul>
<br>
<div onscroll="myFunction3(this)" style="width:100%;height:250px;overflow:scroll;padding:5px;color:#714D03;scrollbar-base-color:#DEBB07;">
<ul id="myUL" class="demo">
</ul>
</div>
<p><span id="demo"></span></p>
</div>
</div>
<script>
$('#myUL').on("mouseenter", "li", function() {
$(this).find("span").show();
})
$('#myUL').on("mouseout", "li", function() {
$(this).find("span").hide();
})
</script>
<script>
// function x()
// {
// var ul = document.getElementById("myUL").getElementsByTagName('li');
// console.log(ul);
// ul.addEventListener('mouseenter', function(e) {
// if ( e.target.matchesSelector('myUL li') ) {
// return "<li>" + item.firstname + "<span class='tool-tip'>" + item.lastname + "</span> " + item.id + "</li>";
// }
// }, false);
// ul.addEventListener('mouseout', function(e) {
// if ( e.target.matchesSelector('myUL li') ) {
// return "<li>" + item.firstname + item.id + "</li>";
// }
// }, false);
// }
</script>
最佳答案
要在 native JS 中执行此操作,您可以使用 querySelectorAll()
查找元素,然后使用 addEventListener()
添加事件处理程序。另请注意,mouseleave
是在这里使用的更好的事件,因为它可以避免在 mouseout
事件下显示子元素时可能遇到的一些闪烁问题。试试这个:
var liCollection = document.querySelectorAll('#myUL li');
[].forEach.call(liCollection, function(li) {
li.addEventListener('mouseenter', function() {
this.querySelector('span').style.display = 'inline';
});
li.addEventListener('mouseleave', function() {
this.querySelector('span').style.display = 'none';
});
})
span { display: none; }
<ul id="myUL">
<li>Foo <span>bar</span></li>
<li>Lorem <span>impsum</span></li>
<ul>
话虽如此,CSS 在这里是一个更合适、更好的解决方案:
li span { display: none; }
li:hover span { display: inline; }
<ul id="myUL">
<li>Foo <span>bar</span></li>
<li>Lorem <span>impsum</span></li>
<ul>
关于javascript - 将 JQuery 代码转换为 "Vanilla"JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47182285/
它是链接中的框架 https://vanillaforums.com/en/software/ ? 解释是什么?有哪些链接? 最佳答案 Vanilla PHP 就是 PHP 本身。 一般来说,术语va
如何使用 vanilla javascript 将按键模拟为输入? 我已经在 SO 和其他地方测试了所有可能的答案,但它在 Chrome 或 Firefox 上不起作用。 例如,假设我们有一个表单:
This answer作者 Jan Burse 展示了 Prolog 中元解释器的最简单实现之一: solve(true) :- !. solve((A,B)) :- !, solve(A), sol
赏金 我在谷歌上搜索它以找到类似的库,但我没有找到......如果有人知道你可以给出答案(仅限 Vanilla js 库和麻省理工学院许可证)...... 否则不要更改 html 结构...修复我的代
我是Rust的新手,试图了解基本的目录遍历。我发现的几乎所有示例都利用了walkdir或glob库,这些库我都取得了很好的成功。但是,我现在正尝试仅使用std lib来执行此操作。 标准lib文档中有
我正在尝试通过事件监听器只需单击一次即可触发函数。但如果我在一次单击后不执行 F5 触发操作,则会在两次单击(第一次)后发生。 代码: HTML ....
我的单页网站在 vanilla js 中有一个平滑的滚动,我尝试在没有 jquery 的情况下实现它,我想添加一个像 cubic bezier 这样的计时函数。有没有办法在 javascript 中做
对于一个小项目,我想制作一个基于浏览器引擎检测浏览器的小型库: var engine = { opera: function(){ var ua = navigator.userAgent.t
嘿,我想弄清楚如何让我的脚本在加载元素时等待执行它的一部分,但目前它主要只是传递它,而不是等待它。在 vanilla js 中最好的方法是什么? 这是代码 this.heading = documen
我正在复制一个 simon 游戏原型(prototype),我正在尝试在 vanilla js 中为按钮闪烁编写一个函数。 目前我有以下功能: function blinkColor(color) {
我正在构建一个类似于 eclipse 刻草图的交互式网格。我已经设置了网格,现在正在尝试设置“悬停”效果,以便当鼠标经过网格 div 时改变颜色,从而像钢笔一样在网格中留下(像素化)轨迹。但我希望颜色
我正在为我在大学的一个科目开发一个元素,包括用纯 javascript 做一个下拉列表过滤器,以过滤 html/css 中的图像网格。导致我出现问题的是这个过滤器需要同时处理 3 个下拉列表。例如,如
我有一个带有主要 div 的简单旋转木马。在主 div 中有一个宽度为 6000px 的 ul,每当我单击向右或向左箭头时,它就会滑动。 我将事件监听器附加到两个箭头,所以当我单击左箭头时,我将 30
我正在研究构造 Vanilla 网络组件。我以前使用过 Polymer,我喜欢这样一个事实,即您可以在一个文件中为您的组件提供模板、样式和 JavaScript。如果可能的话,我想用“ Vanilla
我找到了这个粘性 div 代码段并对其进行了修改,使其在 div 到达页面顶部时看起来粘在窗口底部。我只是好奇是否有某种方法可以抵消底部。这是代码:- let Sticky = (function()
所以我遇到了这个问题,我需要根据一些变量为复选框设置一个值。 问题是我在将要使用的 HTML 上遇到了下一个命名约定: 要决定选择哪个输入,我通常会这样做: document.getEleme
我正在练习 VHDL,我有一个关于不需要过程的“简单”语句的基本问题。 我想知道两者的区别 c <= a and b; 语句不在进程内,只是在架构开始之后编写,并且 process(a,b) begi
在客户处,我们的一个 WPF 应用程序开始挂起。在尝试使用最小的工作示例重现问题时,我发现即使是最基本的(非平凡的)WPF 应用程序也会卡在该机器上。 示例 A : 在 Visual Studio 2
我按照教程制作了一个使用 localstorage 的购物车。现在我正在尝试对其进行调整以适应我自己的需要,以扩展我对 JavaScript 的知识并给自己更多的练习。讲师为每个单独的项目总计做了一个
我需要修改 Vanilla 元解释器,以便进行有限深度的搜索。我正在使用以下代码来测试我的解决方案: value(wire1,1). connected(wire2, wire1). connecte
我是一名优秀的程序员,十分优秀!