如何为正方形的点生成随机位置？

问题描述

我必须制作一个灰色的Square，其中包含多个带有特定类别的点。当我单击类别1按钮时，将仅显示cat1类的点。如果用户单击全部，所有点将可见。 Square应该是敏感的，可以在手机上滑动（例如地图或其他内容）。圆点是空跨度。

.plan__category-btns {
  display:flex;
  list-style: none;
}
.plan__category-btns li {
  margin: 10px;
  
}

.plan__dot {
  display:block; 
  width:5px; 
  height:5px;
  border-radius: 50%;
}
.plan__dot.cat1 {
  background: red;
}
.plan__dot.cat2 {
  background: green;
}
.plan__dot.cat3 {
  background: yellow;
}
.plan__dot.cat4 {
  background: blue;
}

.square {
  width: 100%;
  height: 400px;
  background: #eaeaea;
}

<section id='plan'>
  <ul class='plan__category-btns'>
      <li>
          <button class='plan__all'>All</button>
      </li>
      <li>
          <button class='plan__one'>Category 1</button>
      </li>
      <li>
          <button class='plan__two'>Category 2</button>
      </li>
      <li>
          <button class='plan__three'>Category 3</button>
      </li>
      <li>
          <button class='plan__four'>Category 4</button>
      </li>
  </ul>

</section>

<div class="square">
      <span class='plan__dot cat1'></span>
      <span class='plan__dot cat1'></span>
      <span class='plan__dot cat1'></span>
      <span class='plan__dot cat2'></span>
      <span class='plan__dot cat2'></span>
      <span class='plan__dot cat2'></span>
      <span class='plan__dot cat2'></span>
      <span class='plan__dot cat2'></span>
      <span class='plan__dot cat3'></span>
      <span class='plan__dot cat3'></span>
      <span class='plan__dot cat3'></span>
      <span class='plan__dot cat4'></span>

</div>

解决方法

您将随机显示这样的相关点

const rndBtw = (min,max) => Math.floor(Math.random() * (max - min + 1) + min);

const div = document.querySelector(".square");
const divTop = div.offsetTop;
const divRight = div.offsetWidth
const divBottom = div.offsetTop + div.offsetHeight;

// position - you may need to tweak this - it was done very quickly
[...document.querySelectorAll(".plan__dot")]
.forEach(dot => {
  dot.style.left = rndBtw(0,divRight)+"px";
  dot.style.top = rndBtw(divTop,divBottom)+"px";
});

// show clicked categories
document.getElementById("plan").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("plan")) {
    const cat = tgt.dataset.cat;
    [...document.querySelectorAll(".plan__dot")]
    .forEach(dot => dot.classList.toggle("hide",cat !== "all" && !dot.classList.contains("cat" + cat)));
  }
})

.plan__category-btns {
  display: flex;
  list-style: none;
}

.plan__category-btns li {
  margin: 10px;
}

.plan__dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

.plan__dot.cat1 {
  background: red;
}

.plan__dot.cat2 {
  background: green;
}

.plan__dot.cat3 {
  background: yellow;
}

.plan__dot.cat4 {
  background: blue;
}

.square {
  width: 100%;
  height: 400px;
  background: #eaeaea;
}

.hide {
  display: none;
}

<section id='plan'>
  <ul class='plan__category-btns'>
    <li>
      <button class='plan' data-cat='all'>All</button>
    </li>
    <li>
      <button class='plan' data-cat='1'>Category 1</button>
    </li>
    <li>
      <button class='plan' data-cat='2'>Category 2</button>
    </li>
    <li>
      <button class='plan' data-cat='3'>Category 3</button>
    </li>
    <li>
      <button class='plan' data-cat='4'>Category 4</button>
    </li>
  </ul>

</section>

<div class="square">
  <span class='plan__dot cat1'></span>
  <span class='plan__dot cat1'></span>
  <span class='plan__dot cat1'></span>
  <span class='plan__dot cat2'></span>
  <span class='plan__dot cat2'></span>
  <span class='plan__dot cat2'></span>
  <span class='plan__dot cat2'></span>
  <span class='plan__dot cat2'></span>
  <span class='plan__dot cat3'></span>
  <span class='plan__dot cat3'></span>
  <span class='plan__dot cat3'></span>
  <span class='plan__dot cat4'></span>

</div>