在不同边框的div上调用一个函数 [英] Call a function on a div with different borders

问题描述

我有一个名为'ball'的类，它有一个 div ，这个div的每个边都有一个我想要触发的边框（border-top，border-left等）当用户点击每个边框上的边框时用JavaScript实现不同的事件。

例如：用户点击边框顶部
console.log（'top'）
等等

HMTL：

  .ball {border-radius：50％;宽度：400px; height：400px;保证金：汽车;背景颜色：红色; border-top：20px纯绿色; border-left：20px纯蓝色; border-bottom：20px纯橙色; border-right：20px solid purple;}  

< div class =ball>< / div>

知道当用户点击div本身时我可以触发事件，但我想以某种方式用Javascript选择这些边框。

解决方案

你可以通过添加额外的元素来模拟这个。

是一个exmaple（我使用jQuery for simplicty，但你可以很容易地改变为JS）

$（'span'）。click（function（）{console.log（$（this）.data（'value'））;}）

  .ball {border-radius：50％;宽度：200px; height：200px;保证金：汽车;背景颜色：蓝色;位置：相对; font-size：0;} span：first-child {position：absolute; z-index：3;边界半径：50％;背景：红色;顶部：20像素;左：20像素;底部：20px; right：20px; } span：nth-​​child（n + 2）{position：absolute; z-index：2;宽度：100％;身高：100％;边界半径：50％;背景：绿色;底部：0;正确：0; -webkit-clip-path：多边形（50％50％，0％100％，100％100％）;剪辑路径：多边形（50％50％，0％100％，100％100％）;} span： nth-child（3）{transform：rotate（90deg）;背景：purple;} span：nth-​​child（4）{transform：rotate（180deg）; background：blue;} span：nth-​​child（5）{transform：rotate（-90deg）;背景：orange;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =ball> < span data-value =center>< / span> < span data-value =bottom>< / span> < span data-value =left>< / span> < span data-value =top>< / span> < span data-value =right>< / span>< / div>

$ b

I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.

ex: user clicks on border-top console.log('top') and so on

HMTL:

.ball {
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin: auto;
  background-color: red;
  border-top: 20px solid green;
  border-left: 20px solid blue;
  border-bottom: 20px solid orange;
  border-right: 20px solid purple;
}

<div class="ball"></div>

I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.

解决方案

You can simulate this by adding extra elements.

Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)

$('span').click(function(){
  console.log($(this).data('value'));
})

.ball {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: blue;
  position: relative;
  font-size:0;
}

span:first-child {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  background: red;
  top:20px;
  left:20px;
  bottom: 20px;
  right: 20px;
  
}
span:nth-child(n+2) {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: green;
  bottom: 0;
  right: 0;
  -webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
  transform:rotate(90deg);
  background: purple;
}
span:nth-child(4) {
  transform:rotate(180deg);
  background: blue;
}
span:nth-child(5) {
  transform:rotate(-90deg);
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
  <span data-value="center"></span>
  <span data-value="bottom"></span>
  <span data-value="left"></span>
  <span data-value="top"></span>
  <span data-value="right"></span>
</div>

这篇关于在不同边框的div上调用一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！