随机旋转跨度的内容 [英] Randomly rotate content of a span

问题描述

我试图将文本的< span> 更改为七个文本块之一。我找到了一个教程，可以帮助我使用下面的Javascript来完成它，但是，它依赖于保存在< ul> 中的选择。我不认为我可以这样做，因为我需要将已更改的文本显示在已存在的段落中。

我想可能有办法给span添加一个id，然后在Javascript中设置内容的不同选项。

我只想在页面加载时随机发生更改或被刷新，没有什么复杂的，比如在用户输入或定时器上发生。

下面是我在教程中找到的脚本，也许它只是一个例子简单的修改。我是一个新手，但是我不知道从哪里开始，除非拼写出来。

类型= 文本/ JavaScript的 >

this.randomtip = function（）{
var length = $（＃tips li）。length;
var ran = Math.floor（Math.random（）* length）+ 1;
$（＃tips li：nth-​​child（+ ran +））。show（）;
};
$ b $（document）.ready（function（）{
randomtip（）;
}）;

< / script>

解决方案

类似这样的工作：

Javascript

 < script type =text / javascript > 
 $（document）.ready（function（）{
 
 //隐藏所有提示
 $（'＃tips'）。children（'。tip'）。 hide（）; 
 
 //随机选择一个提示以显示
 var length = $（＃tips .tip）。length; 
 // **编辑** 
 //这段代码是错误的！
 // var ran = Math.floor（Math.random（）* length）+ 1; 
 // $（＃tips .tip：n -child（+ ran +））。show（）; 
 //用这个代替：
 var ran = Math.floor（（Math.random（）* length））; 
 $（'＃tips> .tip：eq（'+ ran +'）'）。show（）; 
}）; 
< / script> 
  

HTML

 < p id =tips> 
< strong>随机提示：< / strong> 
< span class =tip>这是提示1.< / span> 
< span class =tip>这是提示2.< / span> 
< span class =tip>这是提示3.< / span> 
< span class =tip>这是提示4.< / span> 
< span class =tip>这是提示5.< / span> 
< span class =tip>这是提示6.< / span> 
< span class =tip>这是提示7.< / span> 
< / p> 
  

I'm trying to change a <span> of text to one of seven chunks of text. I've found a tutorial that can help me do it using the Javascript below, however, it relies on the selections being kept in a <ul>. I don't think I can do that, because I need the changed text to appear within a pre-existing paragraph.

I'm thinking there might be a way to give the span an id, and then, within the Javascript, set the different options the content could be.

I only want the change to happen randomly as the page loads or is refreshed, nothing complicated like having it happen on a user input or on a timer.

Below is the script I found on the tutorial, maybe it's just a case of a simple amendment. I'm such a newbie, though, I don't really know where to start unless it's spelt out.

<script type="text/javascript">

this.randomtip = function(){
    var length = $("#tips li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){   
    randomtip();
});

</script>

解决方案

Something like this works:

Javascript

<script type="text/javascript">
    $(document).ready( function() {

        // hide all of the tips
        $('#tips').children('.tip').hide();

        // randomly select one tip to show
        var length = $("#tips .tip").length;    
        // **EDIT **
        // This code was buggy!
        //var ran = Math.floor(Math.random()*length) + 1;
        //$("#tips .tip:nth-child(" + ran + ")").show();
        // Use this instead:
        var ran = Math.floor((Math.random()*length));
        $('#tips > .tip:eq('+ran+')').show();
    });
</script>

HTML

<p id="tips">
    <strong>Random Tip: </strong>
    <span class="tip">This is tip 1.</span>
    <span class="tip">This is tip 2.</span>
    <span class="tip">This is tip 3.</span>
    <span class="tip">This is tip 4.</span>
    <span class="tip">This is tip 5.</span>
    <span class="tip">This is tip 6.</span>
    <span class="tip">This is tip 7.</span>
</p>

这篇关于随机旋转跨度的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！