2 组按钮，但其中 1 组执行错误操作

发布于 2024-11-08 19:35:18 字数 1866 浏览 1 评论 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>

原文

I have 2 button sets that, when clicked are supposed to angle the text below them at 45 deg. However, both set 1 and set 2, when clicked, ONLY control the text linked to button 1. I want to have each button set control their respective text. Can someone help me fix this by providing the proper/accurate code? Here's what I have, below:

    <!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲凉≈ 2024-11-15 19:35:18

您遇到的问题是因为两个

标记具有相同的 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>

The problem you're having is because both <p> tags have the same id. You have to make one have a different id. What I would do is pass the id of the text you want to transform to the javascript function so that you can know what text to rotate.

  <!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>

回复收藏 0 原文

~没有更多了~