Question

我正在尝试使用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 =添加）

Answer 1

更新的答案。

Working example

$(document).ready(function(e) {

var myToolTip = $('#tooltip');

  $('#button').on('click', function (){

  var toevoegen = $('#input').val();
  var verwijderen = '<a href = "#" class = "verwijderen">Verwijderen</a>'




  $('#boodschappenlijst').prepend('<li class=\'hoverTarget\' title=\''+toevoegen+' \'>' + toevoegen + '' + '\t' + verwijderen + '</li>');



      $('.hoverTarget').hover(

          function (_evt){

          console.log("e",_evt);

          console.log("e",_evt.currentTarget.attributes['title']);


           myToolTip.html(_evt.currentTarget.attributes['title'].value);      

           myToolTip.css('display', 'block')
},

function (){

  myToolTip.css('display', 'none')
}

);

});





$('#boodschappenlijst').on('click', '.verwijderen', function(){

  $(this).parent('li').remove();

});


$('#input').on('click', function (){

  $(this).val('')

});





}) ;

为订单项添加title属性

 $('#boodschappenlijst').prepend('<li title=\''+toevoegen+'\'>' + toevoegen + '' + '\t' + verwijderen + '</li>');

Answer 2

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

您需要以toevoegen以结构化方式存储li。

您需要将悬停事件附加到li，而不是ul - 或者更具体地说是将来添加到li的任何ul。< / LI>

对于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>

如何为传入的列表项创建工具提示

2 个答案: