Javascript:在选择时切换文本

Javascript: Switch text on select

本文关键字：文本 选择 Javascript      更新时间：2023-09-26

我有：简单的html文本块：

<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>

问题：如何在JavaScript的帮助下在下面（在现有文本行之间）插入一个概念？

即我想用几句话解释上面文本nuclear power的内容，所以我想在该短语下方插入几个单词（例如鼠标悬停）。

这将做到这一点。如果您需要更多详细信息，请告诉我。

<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
p = p[0];
var tmp = '';
p.addEventListener('mouseover', function(){
    tmp = p.innerHTML;
    p.innerHTML = p.innerHTML + ' ...about nuclear...';
}, false);
p.addEventListener('mouseout', function(){
    p.innerHTML = tmp;
}, false);
</script>
</body>
</html>

这是一个带有可用于任何元素的通用函数的版本。

<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, text){
    var tmp = '';
    element.addEventListener('mouseover', function(){
        tmp = element.innerHTML;
        element.innerHTML = element.innerHTML + text;
    }, false);
    element.addEventListener('mouseout', function(){
        element.innerHTML = tmp;
    }, false);
};
</script>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], '...about nuclear...');
</script>
</body>
</html>

将其插入单词旁边。我使用了带有红色的 span 标签来强调。您当然可以添加您喜欢的任何内容。

<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, words, text){
    var tmp = '';
    element.addEventListener('mouseover', function(){
        tmp = element.innerHTML;
        element.innerHTML = element.innerHTML.replace(words, function(m){
            return m+'<span class="nuc">'+text+'</span>';
         });
    }, false);
    element.addEventListener('mouseout', function(){
        element.innerHTML = tmp;
    }, false);
};
</script>
<style>
.nuc{ color: red; }
</style>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], /nuclear/g, '...about nuclear...');
</script>
</body>
</html>

我还在 switchText 函数中添加了 words 参数，使其也更加通用。

第四个，也是最后一个条件已经解决。以下内容将允许在特定悬停的单词或短语上显示文本。

<!DOCTYPE html>
<html>
<head>
<script>
var switchText = function(element, words, text){
    element.innerHTML = element.innerHTML.replace(words, function(m){
        return '<p class="nuc">'+m+'</p>';

     });
     var nuc = element.getElementsByClassName('nuc');
    for(var i=0; i<nuc.length; i++){
        (function(nuc){
            var tmp = nuc.innerHTML,
                doing = false;
            nuc.addEventListener('mouseover', function(){
                if(!doing)
                    this.innerHTML = this.innerHTML + text;
                doing = true;
            });
            nuc.addEventListener('mouseout', function(){
                this.innerHTML = tmp;
                doing = false;
            });
        })(nuc[i]);
   }
};
</script>
<style>
.nuc{ color: red; display: inline;}
</style>
</head>
<body>
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the 
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<script>
var p = document.getElementsByTagName('p');
switchText(p[0], /nuclear/g, '...about nuclear...');
</script>
</body>
</html>

提醒一下，将这种方法用于某些类型的CSS positioning可以制作styled popups、inline navigation，以及可能具有奇怪行为的其他盒子。

相关文章：