Блог

Главная - Вопросы по программированию - 2 набора кнопок, но 1 набор выполняет неправильное действие

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

#javascript #css #button #rotation #rotatetransform

#javascript #css #кнопка #поворот #rotatetransform

Вопрос:

У меня есть 2 набора кнопок, которые при нажатии должны наклонять текст под ними под углом 45 градусов. Однако как set 1, так и set 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:

Проблема, с которой вы столкнулись, заключается в том, что оба <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>

Комментарии:

1. теперь они оба функционируют отдельно, но когда я запускаю первый набор кнопок, текст не вращается, он исчезает.

2. это потому, что в коде, который я опубликовал, стиль был отключен. просто измените это, и все будет в порядке.

3. если бы я знал, на что это изменить, я бы это сделал, но я этого не делаю, и в этом весь смысл моей просьбы о помощи здесь.

4. измените эту строку: div#ftP1 {position: absolute; top: 80px; z-index: 0;} просто поставьте 1 после div # ftP

5. Кажется, что сбой всегда вызывает что-то незначительное! Спасибо за ваш внимательный просмотр! Хорошая работа!