gpt4 book ai didi

javascript - 2 组按钮,但 1 组执行错误操作

转载 作者:太空宇宙 更新时间:2023-11-04 16:23:34 24 4
gpt4 key购买 nike

我有 2 个按钮组,单击它们时它们下方的文本应该成 45 度 Angular 。但是,第 1 组和第 2 组在单击时仅控制链接到按钮 1 的文本。我想让每个按钮组控制它们各自的文本。有人可以通过提供正确/准确的代码来帮助我解决这个问题吗?下面是我所拥有的:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:12px;}
/*#ctrls {float:left; margin-right:20px;}*/
a {margin-left:40px;}

div#ctrls {position:absolute; top:40px; z-index:1;}
div#ftP {position:absolute; top:80px; z-index:0;}

div#ctrls2 {position:absolute; top:120px; z-index:1;}
div#ftP2 {position:absolute; top:160px; z-index:0;}
</style>
<script type="text/javascript">
function transform()
{
var rotation = document.getElementById('rotation').value;
document.getElementById('ft').style.webkitTransform='rotate('+rotation+'deg)';
}

function reset()
{
document.getElementById('ft').style.webkitTransform='rotate(45deg)';
document.getElementById('rotation').value = 0;
}
</script>
</head>
<body>
<div id="ctrls">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP"><p id="ft">hello</p></div>

<div id="ctrls2">
<p type="text" id="rotation" size="4" />
<button onclick="transform()">-</button><button onclick="reset()">+</button>
</div>
<div id="ftP2"><p id="ft">taxes</p></div>

</body>
</html>

最佳答案

你遇到的问题是因为 <p>标签具有相同的 ID。你必须让一个有不同的ID。我要做的是将要转换的文本的 ID 传递给 javascript 函数,这样您就可以知道要旋转的文本。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {font-family:sans-serif; font-size:12px;}
/*#ctrls {float:left; margin-right:20px;}*/
a {margin-left:40px;}

div#ctrls {position:absolute; top:40px; z-index:1;}
div#ftP {position:absolute; top:80px; z-index:0;}

div#ctrls2 {position:absolute; top:120px; z-index:1;}
div#ftP2 {position:absolute; top:160px; z-index:0;}
</style>
<script type="text/javascript">
function transform(order)
{
var rotation = document.getElementById('rotation' + order).value;
document.getElementById('ft' + order).style.webkitTransform='rotate('+rotation+'deg)';
}

function reset(order)
{
document.getElementById('ft' + order).style.webkitTransform='rotate(45deg)';
document.getElementById('rotation' + order).value = 0;
}
</script>
</head>
<body>
<div id="ctrls">
<p type="text" id="rotation1" size="4" />
<button onclick="transform('1')">-</button><button onclick="reset('1')">+</button>
</div>
<div id="ftP1"><p id="ft1">hello</p></div>

<div id="ctrls2">
<p type="text" id="rotation2" size="4" />
<button onclick="transform('2')">-</button><button onclick="reset('2')">+</button>
</div>
<div id="ftP2"><p id="ft2">taxes</p></div>

</body>
</html>

关于javascript - 2 组按钮,但 1 组执行错误操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6053131/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com