2 набора кнопок, но 1 набор выполняет неправильное действие - PullRequest
Новая
       44

2 набора кнопок, но 1 набор выполняет неправильное действие

0 голосов
/ 19 мая 2011

У меня есть 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>

1 Ответ

1 голос
/ 19 мая 2011

Проблема в том, что оба тега <p> имеют одинаковый идентификатор.Вы должны сделать один с другим идентификатором.Что бы я сделал, это передал бы идентификатор текста, который вы хотите преобразовать, в функцию 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>
...