javascript - 如何为传入的列表项制作工具提示

Question

我正在尝试使用 JQuery 为传入的列表项制作工具提示。人们将在文本字段中输入一些文本，按下回车键，这些值将被添加到网站上的可见列表中。我想为将添加到列表中的每个列表项制作一个工具提示。我希望将人们在文本字段中填写的文本添加到工具提示中，这可能吗？我该怎么做？谢谢!这是我目前所拥有的..

<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 = 添加)

Answer 1

您需要进行两项主要更改:

1. 您需要以结构化的方式将toevoegen与li一起存储。
2. 您需要将悬停事件附加到 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>