关于jquery：左右旋转不按预期工作

Rotate Left and Right Not Working as Expected

我有一个 div，我添加了两个 span 和一个按钮，这些 span 用于将 div 向左旋转和向右旋转。
右侧跨度称为向右旋转，左侧跨度称为向左旋转，它们是名为 table 的父 div 的子级。

1
2
3

这会产生以下 div。

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.square4 {
cursor: move;
width: 133px;
height: 133px;
position: absolute !important;
background-image: url(parts/table4.png);
background-repeat: no-repeat;
background-position: center center;
font-size: 17px;
font-weight: bold;
color: #00f;
border: 1px solid #ccc;
border-radius: 6%;
-moz-border-radius: 6%;
-webkit-border-radius: 6%;
left: 741px;
top: -141px;
}

当用户单击左或右时，父 div 应该旋转 15 度，但是当我单击右旋转时没有任何反应，当我单击左旋转时，它会将度数设置为旋转 0，这是第一个值而不是我需要的价值。我将我的值设置为从 0 到 360 度的数组，每次单击右旋转时它们会上升 15 度，如果单击左旋转则返回 15 度。

使用 JQuery UI 将 div 附加到名为 mainarea 的可放置元素，这就是我使用 .on click 的原因。检测到点击，它只是我遇到问题的转换。

我检查了 Array 和按钮单击以确保它们正常工作，我使用 console.log 检查 angle[current] 并返回了正确的值，我相信这与我的 transform 语句和我是如何设置它的，我尝试了不同的方法但没有运气。

我正在使用 Elementor，所以我的 document.ready 与通常的方式有点不同，但这是因为 Elementor 的工作方式，如果您想对其进行测试，您可以将其更改为文档就绪语句，但是我想显示我的确切代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

document.addEventListener("DOMContentLoaded", function(event)
{
var angle = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315 , 330, 345, 360];
var current = 0;

jQuery(document).on(‘click’,’.table > .rotateright’,function(event)
{
current++;

if(current == 25)
{
current = 0;
}

var r = jQuery(this).parents(‘.table’).attr(‘id’);

var rotating = ‘#’.concat(r);

console.log(angle[current]);

jQuery(rotating).css({
‘-webkit-transform’ : ‘rotate(‘ + angle[current] + ‘)’,
‘-moz-transform’ : ‘rotate(‘ + angle[current] + ‘)’,
‘-ms-transform’ : ‘rotate(‘ + angle[current] + ‘)’,
‘-o-transform’ : ‘rotate(‘ + angle[current] + ‘)’,
‘transform’ : ‘rotate(‘ + angle[current] + ‘)’
});
});

jQuery(document).on(‘click’,’.table > .rotateleft’,function(event)
{
current–;

if(current == -1)
{
current = 24;
}

var r = jQuery(this).parents(‘.table’).attr(‘id’);

var rotating = ‘#’.concat(r);

console.log(angle[current]);

您在分配新的旋转 CSS 时缺少 CSS 中的”度”(“angular[当前]”度)

我只修改了右旋转的代码(我没有改变左的代码，可以像右一样改变)，这里见 jsfiddle

小片段如下

1
2
3
4
5
6
7

$(‘#table1’).css({
‘ -webkit-transform’: ‘rotate(‘+ angle[current]+’ deg)’,
‘-moz-transform’: ‘rotate(‘+ angle[current]+’ deg)’,
‘-o-transform’: ‘rotate(‘+ angle[current]+’deg)’,
‘-ms-transform’: ‘rotate(‘+ angle[current]+’deg)’,
‘transform’: ‘rotate(‘+ angle[current]+’deg)’}
);

并且正确的跨度将其保持在目标 div 之外，因为它将随着主 div 旋转而旋转

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268766.html

关于jquery：左右旋转不按预期工作

Rotate Left and Right Not Working as Expected

相关推荐

发表回复