Javascript 如何在jquery中更改span的值

Html

全部滚动
下一轮
雷塔尔

p1
健康10
点0
能源0
赫图鲁

p2
健康10
点0
能源0

Jquery

<button id = 'roll'>roll all</button>
        <img class = 'die' src="one.jpg" name ="first">
        <img class = 'die'src="two.jpg" name ="second">
        <img class = 'die' src="three.jpg" name ="third">
        <img class = 'die' src="energy.jpg" name ="fourth">
        <img class = 'die' src="hit.jpg" name ="fifth">
        <img class = 'die' src="heal.jpg" name ="last">

        <button id='turns'>next turn</button>
        <div id='players'>
            <div id ='player1'>
                <p>reptar</p>
                <p id='token1'>p1</p>
                <p class ='health' name ='p1H'> health <span id = 'p1Health'>10</span></p>
                <p class ='points' name ='p1P'> point <span id = 'p1Points'>0</span></p>
                <p class ='energy' name ='p1E'> energy <span id = 'p1Energy'>0</span></p>


            </div>

            <div id ='player2'>
                <p>Chtulu</p>
                <p id='token2'>p2</p>
                <p class ='health' name ='p2H'> health <span id = 'p2Health'>10</span></p>
                <p class ='points' name ='p2P'> point <span id = 'p2Points'>0</span></p>
                <p class ='energy' name ='p2'> energy <span id = 'p2PEnergy'>0</span></p>

            </div>

        </div>

$（函数（）{
var计数器=0；
var currentPlayer=[$（“player1”），$（“player2”）]
var存储=[]；
var溢出=3；
var值=[0,0,0,0,0]；
变量名称=[“一”、“二”、“三”、“能量”、“命中”、“治疗”]
var pointOne=0；
var Point2=0；
var pointThree=0
var dice=$（'.die'）.map（函数（）{
返回$（this.attr（'src'））
}).get（）；
//全部滚动
$（“#滚动”）。单击（函数（）{
//将骰子值num存储到存储[0]
var num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=first]'）.attr（'src'，dice[num]）；
存储[0]=骰子[num]；
//将骰子值num存储到存储区[1]
num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=second]'）.attr（'src'，dice[num]）；
存储[1]=骰子[num]；
//将骰子值num存储到存储区[2]
num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=third]'）.attr（'src'，dice[num]）；
存储[2]=骰子[num]；
//将骰子值num存储到存储区[3]
num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=fourth]'）.attr（'src'，dice[num]）；
存储[3]=骰子[num]；
//将骰子值num存储到存储区[4]
num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=fifth]'）.attr（'src'，dice[num]）；
存储[4]=骰子[num]；
//将骰子值num存储到存储区[5]
num=Math.floor（Math.random（）*dice.length）；
$（'.die[name=last]'）.attr（'src'，dice[num]）；
存储[5]=骰子[num]；
});
$（'#圈数'）。单击（函数（）
{
第一点=0；
第二点=0；
第三点=0
值=[0,0,0,0,0,0]；
用于（num=0；num0）{
值[0]=点一；
}
如果（第二点>0）{
值[1]=第二点；
}
如果（第三点>0）{
值[2]=第三点
第三点=0；
}
});
});

现在，它所做的是能够得分，并添加最后三个骰子的总数。我想做的是能够根据骰子卷更改玩家的跨度。

---

感谢您抽出时间

Span没有值属性，因此您不能更改其值，但可以更改Span的innerhtml

请在您的本地计算机上运行下面给出的示例，您将了解我想说的内容

$(function () {
    var counter =0;
    var currentPlayer = [$("player1"),$("player2")]
    var store=[];
    var overflow=3;
    var value=[0,0,0,0,0,0];
    var names=[ "one","two","three","energy","hit","heal"]
    var pointOne=0;
    var pointTwo=0;
    var pointThree=0
    var dice = $('.die').map(function () {
        return $(this).attr('src')
    }).get();


    //Roll all
    $('#roll').click(function () {
        //store dice value num  into store[0]
        var num = Math.floor(Math.random() * dice.length);
        $('.die[name=first]').attr('src', dice[num]);
        store[0] = dice[num];
        //store dice value num  into store[1]
         num = Math.floor(Math.random() * dice.length);
        $('.die[name=second]').attr('src', dice[num]);
        store[1] = dice[num];

        //store dice value num  into store[2]
         num = Math.floor(Math.random() * dice.length);
        $('.die[name=third]').attr('src', dice[num]);
        store[2] = dice[num];

        //store dice value num  into store[3]
         num = Math.floor(Math.random() * dice.length);
        $('.die[name=fourth]').attr('src', dice[num]);
        store[3] = dice[num];

        //store dice value num  into store[4]
         num = Math.floor(Math.random() * dice.length);
        $('.die[name=fifth]').attr('src', dice[num]);
        store[4] = dice[num];

        //store dice value num  into store[5]
         num = Math.floor(Math.random() * dice.length);
        $('.die[name=last]').attr('src', dice[num]);
        store[5] = dice[num];

    });
    $('#turns').click(function () 
    {
        pointOne=0;
        pointTwo=0;
        pointThree=0
        value=[0,0,0,0,0,0];
        for (num =0; num<store.length; num++)
        {
            //Count how many times for one
            if (store[num]=='one.jpg'){
                if(value[0]<2){
                    value[0]+=1;

                }else if(value[0]==2){
                    pointOne +=1;
                    value[0]+=1;
                }else if (value[0]>2){
                    overflow+=1;
                    pointOne=1+(overflow%3);
                    if(overflow%3==0){
                        pointOne=3
                    }

                }
            }
            //Count how many times for two
            if (store[num]=='two.jpg'){
                if(value[1]<2){
                    value[1]+=1;

                }else if(value[1]==2){
                    pointTwo +=2;
                    value[1]+=1;
                }else if (value[1]>2){
                    overflow+=1;
                    pointTwo=2+(overflow%3);
                    if(overflow%3==0){
                        pointTwo=5
                    }
                    value[1]+=1;
                }
            }
            //Count how many times for three
            if (store[num]=='three.jpg'){
                if(value[2]<2){
                    value[2]+=1;

                }else if(value[2]==2){
                    pointThree +=3;
                    value[2]+=1;
                }else if (value[2] >2){
                     overflow+=1;
                    pointThree=3+(overflow%3);
                    if (overflow%3==0){
                        pointThree=6
                    }
                }
            }
            //Count how many times for energy
            if (store[num]=='energy.jpg'){
                value[3]+=1;
            }
             //Count how many times for hits
            if (store[num]=='hit.jpg'){
                value[4]+=1;
            }
             //Count how many times for heals
            if (store[num]=='heal.jpg')
            {
                value[5]+=1;
            }
        }
        if(pointOne >0){
            value[0] = pointOne;
        }

        if(pointTwo >0){
            value[1] = pointTwo;
        }

        if(pointThree >0){
            value[2] = pointThree
            pointThree=0;
        }


    });

});

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“span”）.html（“你好，世界！”）；
});
});
更改跨度元素的内容
这是一段。

谢谢

---

Amit（'yourSpan'）.html（'new value'）

只需尝试使用特定的

span

id，您需要更改它

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("span").html("Hello <b>world!</b>");
    });
});
</script>
</head>
<body>

<button>Change content of span elements</button>

<span>This is a paragraph.</span>

</body>
</html>

---

您希望使用Jquery.html（）方法

这会将跨度内的内容更改为您试图获取的值，因此对于player one，您可以：

$(selector).html(value);

---

抱歉，没有说得更具体，请告诉我这是否有帮助。

只有输入有“值”。span元素的文本可以使用JQuerys.text（）方法更改。这就是你想做的吗？虽然这一行可能解决问题，但最好添加一些信息，以澄清这一行解决问题的原因。

$(selector).html(value);

$("#p1Health").html(health); //Setting the health span to the health value
$("#p1Points").html(points); //Setting the points span to the points value
$("#p1Energy").html(energy); //Setting the energy span to the energy value