我想用 jQuery 創建一個投票系統但不工作

Question

我正在嘗試用 jQuery 創建一個 function 但我做不到。 當您按下按鈕時，箭頭將移動到 36 度。 我有 5 個按鈕，圓圈是 180 度。

我的代碼以一種方式工作，但不是相反的，這意味着當您按下按鈕 1 到 5 時它正在工作，但是當我嘗試隨機單擊時它就不起作用。

這是我正在嘗試構建的

 $(document).ready(function() { $("#ang36").click(function() { $("#silder_image").removeClass("animate1"); $("#silder_image").addClass("animate1"); }); $("#ang72").click(function() { $("#silder_image").removeClass("animate2"); $("#silder_image").addClass("animate2"); }); $("#ang108").click(function() { $("#silder_image").removeClass("animate3"); $("#silder_image").addClass("animate3"); }); $("#ang144").click(function() { $("#silder_image").removeClass("animate4"); $("#silder_image").addClass("animate4"); }); $("#ang180").click(function() { $("#silder_image").removeClass("animate5"); $("#silder_image").addClass("animate5"); }); });

 .slider_area { width: 800px; margin: 0 auto; position: relative; margin-top: 400px; }.silder_image { width: 100px; height: 100px; }.animate1 { transform: rotate(36deg); -ms-transform: rotate(36deg); -webkit-transform: rotate(36deg); transform-origin: center center; transition-duration: 5s; }.animate1 img, .animate2 img, .animate3 img, .animate4 img, .animate5 img { transform: rotate(-90deg); }.animate2 { transform: rotate(72deg); -ms-transform: rotate(72deg); -webkit-transform: rotate(72deg); transform-origin: center center; transition-duration: 5s; }.animate3 { transform: rotate(108deg); -ms-transform: rotate(108deg); -webkit-transform: rotate(108deg); transform-origin: center center; transition-duration: 5s; }.animate4 { transform: rotate(144deg); -ms-transform: rotate(144deg); -webkit-transform: rotate(144deg); transform-origin: center center; transition-duration: 5s; }.animate5 { transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform-origin: center center; transition-duration: 5s; }.triggrs { position: relative; width: 400px; bottom: -171px; left: 0; }

 <div class="slider_area"> <div id="silder_image"> <img src="Slider Vote.png" alt=""> </div> <div class="triggrs"> <button id="ang36">button1</button> <button id="ang72">button2</button> <button id="ang108">button3</button> <button id="ang144">button4</button> <button id="ang180">button5</button> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

我創建了另一種方法，它也可以進一步幫助你（也許）。

 let needle = document.querySelector('#needle '); let btns = document.querySelectorAll('button') btns.forEach( btn=>{ btn.addEventListener('click', function() { let level = this.dataset.deg; needle.style.transform = "rotate("+Number(level)+"deg)"}); })

 #panel { height: 50px; overflow: hidden; }.circle{ width: 100px; height: 100px; border-radius: 100%; border: 5px solid grey; position: relative; display: flex; justify-content: center; transform: rotate(-90deg); background: #ffffff; background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%); } #needle { width: 6px; height: 50px; background: #4361ff; transform-origin: bottom; transition: transform.75s cubic-bezier(.31,-0.52,.84,1.55); transform: rotate(30deg); box-sizing: border-box; margin-left: -3px; }.buttons { margin-top: 2rem; }

 <div id="panel"> <div class="circle"> <div id="needle"></div> </div> </div> <div class="buttons"> <button data-deg="30">1</button> <button data-deg="60">2</button> <button data-deg="90">3</button> <button data-deg="120">4</button> <button data-deg="150">5</button> </div>