我正在尝试使用 JQuery 为传入列表项制作工具提示。人们将在文本字段中输入一些文本,然后按 Enter 键,这些值将添加到网站上的可见列表中。我想为将添加到列表中的每个列表项制作一个工具提示。我希望将人们在文本字段中填写的文本添加到工具提示中,这可能吗?我怎样才能做到这一点?谢谢!这就是我到目前为止所拥有的..
<div id="tooltip"></div>
<input type="text" id="input" placeholder="Voer item in" /> <button id="button">Toevoegen</button>
<ul id="boodschappenlijst">
</ul>
----------------------------------------------------------------------------
$(document).ready(function(e) {
$('#button').on('click', function (){
var toevoegen = $('#input').val();
var verwijderen = '<a href = "#" class = "verwijderen">Verwijderen</a>'
<!--add list item-->
$('#boodschappenlijst').prepend('<li>' + toevoegen + '' + '\t' + verwijderen + '</li>');
});
<!--remove list item-->
$('#boodschappenlijst').on('click', '.verwijderen', function(){
$(this).parent('li').remove();
});
<!-textfield empty-->
$('#input').on('click', function (){
$(this).val('')
});
$('#boodschappenlijst').hover(
function (){
$('#tooltip').css('display', 'block')
},
function (){
$('#tooltip').css('display', 'none')
};
);
}) ;
----------------------------------------------------------------
#tooltip {
position: absolute;
top: 100px;
right: 300px;
border: 1px solid #000000;
border-radius: 5px;
color: black;
width: 100px;
display: none;
}
出现工具提示,但我希望将人们在文本字段中填写的文本添加到工具提示中。如果您需要更多信息,请询问。提前致谢(verwijderen = 删除,toevoegen = 添加)
最佳答案
您需要进行两项主要更改:
- 您需要以结构化方式将
toevoegen
与li
一起存储。 - 您需要将悬停事件附加到
li
,而不是ul
- 或者更具体地说,添加到ul
将来。
对于1.您可以使用jquery data()
存储工具提示值:
var li = $('<li>' + toevoegen + '' + '\t' + verwijderen + '</li>');
li.data('tooltip', toevoegen);
$('#boodschappenlijst').prepend(li);
对于 2.,您需要使用 on()
而不是 hover()
以确保新的 li
获得附加的事件:
$('#boodschappenlijst').on('mouseenter', 'li', function () {
var toevoegen = $(this).data('tooltip');
$('#tooltip').css('display', 'block').html(toevoegen);
}).on('mouseleave', 'li', function () {
$('#tooltip').css('display', 'none').html('');
});
这是完整的内容,已整理:
$(document).ready(function (e) {
$('#button').on('click', function () {
var toevoegen = $('#input').val();
var verwijderen = '<a href="#" class="verwijderen">Verwijderen</a>'
//add list item
var li = $('<li>' + toevoegen + '' + '\t' + verwijderen + '</li>');
li.data('tooltip', toevoegen);
$('#boodschappenlijst').prepend(li);
});
// remove list item
$('#boodschappenlijst').on('click', '.verwijderen', function () {
$(this).parent('li').remove();
});
// textfield empty
$('#input').on('click', function () {
$(this).val('');
});
$('#boodschappenlijst').on('mouseenter', 'li', function () {
var toevoegen = $(this).data('tooltip');
$('#tooltip').css('display', 'block').html(toevoegen);
}).on('mouseleave', 'li', function () {
$('#tooltip').css('display', 'none').html('');
});
});
#tooltip {
position: absolute;
top: 100px;
right: 300px;
border: 1px solid #000000;
border-radius: 5px;
color: black;
width: 100px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tooltip"></div>
<input type="text" id="input" placeholder="Voer item in" /> <button id="button">Toevoegen</button>
<ul id="boodschappenlijst"></ul>
关于javascript - 如何为传入列表项制作工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26554793/