如何在jQuery中更改跨度的值

Question

Html

<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>

Jquery

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


    });

});

Right now all it does is able to score up the points and add the total amount for the last three dice what I want to do is be able to change the span of a player based on the dice rolls. thank you for your time

Answer 1

Span does not have value attribute, so you can not change its value, however you can change the innerhtml of span.

please run the example given below in your local you will get idea, what i am trying to say.

<!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>

Thanks Amit

Answer 2

$('#yourSpan').html('new value');

Answer 3

只需尝试使用需要更改的特定span ID。

$("#p1Health").text("5");

Answer 4

You're looking to use the Jquery .html() method.

$(selector).html(value);

This is going to change the contents inside the spans to the values you're trying to get, so for player one you'd go:

$("#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

Sorry to not be more specific, let me know if this helps.