如何在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;
        }


    });

});

现在所做的一切都是能够得分并加上最后三个​​骰子的总量，我想做的是能够根据骰子掷骰来改变玩家的跨度。 谢谢你的时间

Answer 1

Span没有值属性，因此您无法更改其值，但您可以更改span的 innerhtml 。

请在当地运行下面给出的示例，你会明白，我想说的是什么。

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

由于 阿米特

Answer 2

array[0] = []; array[0].splice(); array[0].length = 0; array[0].splice(0); array[0] = null;

Answer 3

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

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

Answer 4

您正在寻找使用Jquery .html（）方法。

$(selector).html(value);

这会将跨度内的内容更改为您尝试获取的值，因此对于玩家1来说，你会去：

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

很抱歉不再具体，请告诉我这是否有帮助。