将圆形边框转换为可点击功能答案

【问题标题】：convert the circle border onto clickable function将圆形边框转换为可点击功能
【发布时间】：2018-05-07 06:06:40
【问题描述】：

我使用 div 创建了一个圆圈。但我正在努力将圆形边框转换为可点击功能。

我的主要实现重点是 React。但是，如果我也获得了基本 JS 中的逻辑，那么我会将其转换为 react。这也是我标记 react 的原因。

我想要实现的是：有 4 段圆形边框。在左上边框和左下边框上类似右上边框和右下边框。我希望它转换成可点击的 4 个不同的功能。下面预览

function redClick(){
}
function blueClick(){
}
function greenClick(){
}
function orangeClick(){
}

.circle
{
  border-radius:30px;
  width:35px;
  height:35px;
  border:4px red solid;
  border-top:4px solid red;
  border-right:4px solid green;
  border-bottom:4px solid blue;
  border-left:4px solid orange;
  transform:rotate(45deg);
 
}

<html>
  <body>
    <div class="circle">
    </div>
  <body>
</html>

在点击红色时，它应该调用红色函数，并且对所有人都类似

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你应该把宿舍分开。它使检测您点击哪个季度变得更加容易。我这里有一个例子。

$('.top-left').click(function() {
  console.log("top left")
});
$('.top-right').click(function() {
  console.log("top right")
});
$('.bottom-left').click(function() {
  console.log("bottom left")
});
$('.bottom-right').click(function() {
  console.log("bottom right")
});

#circle-container {
  width: 200px;
  height: 200px;
  position:relative;
  z-index:1;
}

.fill-circle {
  width: 190px;
  height: 190px;
  position:absolute;
  z-index:5;
  background-color:#fff;
  border-radius:190px;
  margin:5px 0px 0px 5px;
  background-image: url('https://darko.co.za/circle-fill.png');
  background-repeat:no-repeat;
}

.quarter {
  position: relative;
  width: 100px;
  height: 100px
}

.quarter-fill {
      position:absolute;
      width: 90px;
      height: 90px;
      background-color:#fff;
}

.top-left-fill {
    bottom:0;
    right:0;
    border-top-left-radius: 200px;
}

.top-right-fill {
  bottom: 0;
  left: 0;
  border-top-right-radius: 200px;
}

.bottom-left-fill {
  top: 0;
  right: 0;
  border-bottom-left-radius: 200px;
}

.bottom-right-fill {
  top: 0;
  left: 0;
  border-bottom-right-radius: 200px;
}

.top-left {
  border-top-left-radius: 200px;
  background: #1fb14e;
  float: left
}

.top-right {
  border-top-right-radius: 200px;
  background: #1ba8e0;
  float: right
}

.bottom-left {
  border-bottom-left-radius: 200px;
  background: #fecc0b;
  float: left
}

.bottom-right {
  border-bottom-right-radius: 200px;
  background: #de232c;
  float: right
}

<div id="circle-container">
  <div class="quarter top-left">
    <div class="quarter-fill top-left-fill"></div>
  </div>
  <div class="quarter top-right">
        <div class="quarter-fill top-right-fill"></div>
  </div>
  <div class="quarter bottom-left">
        <div class="quarter-fill bottom-left-fill"></div>
  </div>
  <div class="quarter bottom-right">
        <div class="quarter-fill bottom-right-fill"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

【讨论】：

感谢它的工作@Ron Nabuurs。现在我只需要把这个逻辑转换成react