Question

我试图让五个圆圈对齐，然后当我点击圆圈时，我希望数字5出现在圆圈内，如果我再次点击，则会显示数字4而不是数字5等某种反击。

我使用CSS绘制圆圈并尝试使用jQuery来操纵圆圈并显示数字，但我没有得到所需的结果。

当我点击圆圈时，会出现数字5，但圆圈会移位。非常感谢您的帮助。

谢谢

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Circle clicking </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" /> 
    <meta name="viewport" content= "width=device-width , initial-scale = 1.0">
    <body class: "body">
    <div id="first-exercise">       
        <h4 id="left">squat</h4>
        <h4 id="right">5x5 100LB</h4>
        <hr width="95%">
        <p class="circle"></p>
        <p class="circle2"></p>
        <p class="circle3"></p>
        <p class="circle4"></p>
        <p class="circle5"></p>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </body>
</html>

CSS：

#first-exercise {
    background-color: #ffffff;
    width:60%; 
    position: relative;
    margin-top: 8%;
    -moz-box-shadow: 0px 0px 7px #777777;
    -webkit-box-shadow: -5px 0px 7px #777777;
    box-shadow: 0px 0px 7px #777777;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.circle {
    width: 34px;
    height: 34px;
    background: #f91d04;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.circle2 {
    width: 34px;
    height: 34px;
    background: #FFFFFF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.circle3{
    width: 34px;
    height: 34px;
    background: #FFFFFF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}

.circle4 {
    width: 34px;
    height: 34px;
    background: #FFFFFF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}
.circle5 {
    width: 34px;
    height: 34px;
    background: #FFFFFF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-style: solid;
    border-width: thin;
    border-color: lightgray;
}
#first-exercise p {
    display: inline-block;
    margin-left: 10%;
    margin-top: 0%;
}

#first-exercise h4 {
    display: inline-block;
    font-variant: small-caps;
    color: #f91d04;
}
#first-exercise #right{
    margin: 0% 2% 0% 61%;
}

#first-exercise #left{
    margin: 0% 14% 0% 2%;
}

jQuery的：

$('#first-exercise .circle').on('click', function(){
   $('#first-exercise .circle').html('<p>5<p>')  
});

Answer 1

自由改变你的CSS。

我认为这可能是你想要的：

<!DOCTYPE html>
<html lang="en">

<head>
    <title> New Responsive design web page </title>
    <meta charset="utf-8" />

    <meta name="viewport"    content= "width=device-width , initial-scale = 1.0">


    <style>
        #first-exercise{
            background-color: #ffffff;
            width:60%;
            position: relative;
            margin-top: 8%;

            -moz-box-shadow: 0px 0px 7px #777777;
            -webkit-box-shadow: -5px 0px 7px #777777;
            box-shadow: 0px 0px 7px #777777;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;

        }

        .circle {
            width: 34px;
            height: 34px;
            background: #fff;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            border-style: solid;
            border-width: thin;
            border-color: lightgray;
            text-align: center;
            line-height: 34px;
        }

        .circle.selected {
            background: #f91d04;
        }

        #first-exercise p {
            display: inline-block;
            margin-left: 10%;
            margin-top: 0%;
            margin-bottom: 1%;
        }

        #first-exercise h4 {
            display: inline-block;
            font-variant: small-caps;
            color: #f91d04;

        }
        #first-exercise #right{
            margin: 0% 2% 0% 61%;

        }

        #first-exercise #left{
            margin: 0% 14% 0% 2%;
        }


    </style>


<body>
<div id="first-exercise">

    <h4 id="left">squat</h4>
    <h4 id="right">5x5 100LB</h4>
    <hr width="95%">
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>
    <p class="circle">&nbsp;</p>




</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
// init array
var counter = [];
for (var i=0; i < 5; i++) counter[i] = 5;

$('#first-exercise .circle').on('click', function(){

    var index = $('#first-exercise .circle').index(this);

    var displayText = counter[index];
    $(this).addClass('selected');
    $(this).html(displayText);

    if (counter[index] == 0)
    {
        counter[index] = 5;
    }
    else {
        counter[index]-=1;
    }
});
</script>
</body>
</html>

Answer 2

您可以使用 JavaScript 。创建一个覆盖圆圈的<div id="(add your id here)">元素，并使用CSS将其重新塑造为圆形的大小和形状。在HTML文档中实现JavaScript脚本，并使用document.getElementById()方法为元素分配变量。现在使用variable.innerHTML变量并将其设置为整数“5”作为默认值。单击圆圈后，插入一个语句将变量variable.innerHTML减一。要在单击圆圈时将文本更改为5并且为0，只需在 circle_clicked事件处理程序中添加一个语句即可。该声明的代码如下：

if (variable.innerHTML === 0) {
    variable.innerHTML = 5;
}

希望这有助于。

五个圆圈对齐，当我点击圆圈时，我希望数字5出现在圆圈内

2 个答案: