Question

我有：简单的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是什么，所以我想在该短语下面插入一些单词（比如鼠标悬停）。< / p>

Answer 1

这样做。如果您需要更多详细信息，请与我们联系。

<!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，以及可能有其他奇怪行为的方框。

Javascript：在选择时切换文本

1 个答案: