0

我有 2 个按钮集，当单击它们时，它们下方的文本应该以 45 度角倾斜。但是，当单击设置 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>
4

1 回答 1

1

您遇到的问题是因为两个<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>
于 2011-05-19T02:35:35.027 回答