jquery获取所选单词

我有一个带class='divclass'的div，里面有一些文本。。。现在我想显示一个弹出窗口，当用户鼠标在div中的任何单词上。。。弹出窗口还将显示用户在鼠标上方使用鼠标的单词。。。我们如何才能做到这一点？。

我认为你必须用

这样的元素来围绕任何单词，然后：

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

---

我认为你必须用

这样的元素来包围任何单词，然后：

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

试试这个：

$(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());
});

});

$（文档）.ready（函数（）{
var all_words=$（“#divclass”）.text（）.split（“”）；
$（“#divclass”）.html（“”）；
$.each（所有单词，函数（i，val）
{
$（''）.text（val+）.appendTo（“#divclass”）；
});
$（“#divclass span”）.live（“鼠标悬停”，函数（）{
警报（$（this.text（））；
});
});

请在此处观看直播：

尝试以下内容：

$(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());
});

});

$（文档）.ready（函数（）{
var all_words=$（“#divclass”）.text（）.split（“”）；
$（“#divclass”）.html（“”）；
$.each（所有单词，函数（i，val）
{
$（''）.text（val+）.appendTo（“#divclass”）；
});
$（“#divclass span”）.live（“鼠标悬停”，函数（）{
警报（$（this.text（））；
});
});

---

现场观看：

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

$(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());
    });
});

$（函数（）{
var text=$（“.divclass”）.text（）；
text=“”+$。修剪（text）+”；
text=text.replace（/\s/g，“”）
$（“.divclass”）.html（文本）；
$（“.divclass span”）.live（“鼠标悬停”，函数（）{
警报（$（this.text（））；
});
});

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

$(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());
    });
});

$（函数（）{
var text=$（“.divclass”）.text（）；
text=“”+$。修剪（text）+”；
text=text.replace（/\s/g，“”）
$（“.divclass”）.html（文本）；
$（“.divclass span”）.live（“鼠标悬停”，函数（）{
警报（$（this.text（））；
});
});

您可以执行以下操作：

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
      });
   });
});

函数dividetextinspan（文本）{
返回$.map（text.split（“”），函数（word）{
返回“”+单词+“”；
}).加入（“”）；
}
$（文档）.ready（函数（）{
$（“.divclass”）.each（函数（）{
var newInnerHtml=divideTextInSpans（$（this.text（））；
$（this.html（newInnerHtml）；
$（this.find（“.word”）.hover（函数（）{
//在这里显示您的弹出代码
$（this.css（“backgroundColor”，“yellow”）；//高亮显示
}，函数（）{
//在这里隐藏你的弹出代码
$（this.css（“backgroundColor”，“”）；//取消高亮显示
});
});
});

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

您可以执行以下操作：

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
      });
   });
});

函数dividetextinspan（文本）{
返回$.map（text.split（“”），函数（word）{
返回“”+单词+“”；
}).加入（“”）；
}
$（文档）.ready（函数（）{
$（“.divclass”）.each（函数（）{
var newInnerHtml=divideTextInSpans（$（this.text（））；
$（this.html（newInnerHtml）；
$（this.find（“.word”）.hover（函数（）{
//在这里显示您的弹出代码
$（this.css（“backgroundColor”，“yellow”）；//高亮显示
}，函数（）{
//在这里隐藏你的弹出代码
$（this.css（“backgroundColor”，“”）；//取消高亮显示
});
});
});

---

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

如果您可以在html源代码中拆分这些单词（例如用span包装每个单词），那就很容易了。然后可以绑定mouseover/mouseout事件以获得结果。你认为你可以更改html吗（我的意思是你有权限这么做吗）如果你可以在html源代码中拆分单词（例如用span包装每个单词），那就很容易了。然后可以绑定mouseover/mouseout事件以获得结果。你认为你可以更改html吗（我的意思是你有权限这么做吗）