Question

我有一个带有class ='divclass'的div和里面的一些文字...现在我想在用户鼠标悬停在div中的任何单词时显示一个弹出窗口...弹出窗口也会显示用户拥有的单词mousedover the mouse ...我们怎样才能实现这个目标？..

Answer 1

我认为你必须用<span>等元素包围任何单词，然后：

$('.divclass span').mouseover(function(){
    alert($(this).text());
    // or showMyPopup($(this).text());
});

Answer 2

试试这个：

$(document).ready(function(){
var all_words=$("#divclass").text().split(' ');
$("#divclass").html("");

$.each(all_words, function(i,val)
{
$('<span/>').text(val +" ").appendTo("#divclass");

});
$("#divclass span").live("mouseover",function(){
    alert($(this).text());
});

});

在此处观看：http://jsfiddle.net/jqLw8/

Answer 3

我同意bicccio。为了节省时间，您还可以使用以下代码自动创建围绕每个单词的跨度创建，然后附加事件以显示文本：

$(function() {
    var text = $(".divclass").text();
    text = "<span>" + $.trim(text) + "</span>";
    text = text.replace(/\s/g, "</span><span>&nbsp;")
    $(".divclass").html(text);

    $(".divclass span").live("mouseover", function() {
        alert($(this).text());
    });
});

Answer 4

你可以这样做：

function divideTextInSpans(text){
   return $.map(text.split(" "), function(word){
      return '<span class="word">'+word+'</span>';
   }).join(' ');
}

$(document).ready(function(){
   $(".divclass").each(function(){
      var newInnerHtml = divideTextInSpans($(this).text());
      $(this).html(newInnerHtml);
      $(this).find(".word").hover(function(){
          //Show your popup code here
          $(this).css("backgroundColor", "yellow"); //Highlight
      }, function(){
         //Hide your popup code here
          $(this).css("backgroundColor", ""); //Un-Highlight
      });
   });
});

我们正在做的是将div中的每个单词放在一个单独的范围内，然后绑定一个悬停事件。

jquery得到选定的单词

4 个答案: