如何为每个四分之一圆添加点击事件

Question

目标是为每个四分之一圆添加一个函数。

该圆圈是通过以下方式生成的： HTML：

<div class="circle">

CSS：

.circle {

    margin: 1em auto;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    box-sizing: border-box;

    border-width: 20px;

    border-style: solid;

    border-color: red green blue yellow;

    transform: rotate(45deg);

}

就像我在这里找到的：如何用四个四分之一创建圆

我想在单击特定季度时执行函数quarterClicked()。

Answer 1

你可以像这样画你的圆圈：<div class="circle">&nbsp; <div id="blue" class="quarter" onclick="quarterClicked()"></div>&nbsp; <div id="green" class="quarter" onclick="q2()"></div>&nbsp; <div id="red" class="quarter" onclick="q3()"></div>&nbsp; <div id="black" class="quarter" onclick="q4()"></div></div>CSS：.circle {&nbsp; display: block;&nbsp; padding: 0;&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; border: 1px;&nbsp; border-radius: 50%;&nbsp; overflow: hidden;}.quarter {&nbsp; display: inline-block;&nbsp; float: left;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; width: 100px;&nbsp; height: 100px;}#blue {&nbsp; background-color: blue;}#green {&nbsp; background-color: green;}#red {&nbsp; background-color: red;}#black {&nbsp; background-color: black;}JavaScript：quarterClicked(){&nbsp; &nbsp; //your code}