Какие ошибки в коде приводят к тому, что это не работает должным образом? - PullRequest
Новая
       52

Какие ошибки в коде приводят к тому, что это не работает должным образом?

0 голосов
/ 04 марта 2020

Итак, я пытаюсь использовать функцию нажатия клавиш, чтобы при нажатии клавиши «а» я хотел, чтобы все мои элементы делились на 50 пикселей и растягивались на 25 пикселей для высоты и ширины в течение 1 секунды; когда я нажимаю клавишу «b», чтобы div уменьшился на 50px и уменьшился на 25 px. Я подготовил документ для своего сценария, и я не смог включить функции. Ниже приведен фрагмент моего кода. Очевидно, что-то не так с моим кодом, и по какой-то причине мой 75-летний профессор просто кричит, когда вы задаете ему вопросы. Я поместил 8 делений в разных областях экрана, и цель состоит в том, чтобы сдвигать их вверх и вниз. Я ясно знаю, что что-то не так с моим кодом, но я не уверен, где. Заметки, данные нам в классе, также не функционируют, и они непосредственно взяты из его макета на доске. Мой сценарий не работает вообще. Я использую неправильные атрибуты? 

<!DOCTYPE html>
<html>

<head>
    <title>Page 1</title>

<style type="text/css">

    .divs {
        position: absolute;
        height: 100px;
        width: 100px;
        border: 2px solid red;
        background-color: yellow;
    }

    #div1 {
        left: 40px;
        top: 125px;
    }

    #div2 {
        right: 45px;
        bottom: 27px;
    }

    #div3 {
        left: 85px;
        top: 352px;
    }

    #div4 {
        right: 258px;
        bottom: 323px;
    }

    #div5 {
        left: 450px;
        top: 587px;
    }

    #div6 {
        right: 198px;
        top: 498px;
    }

    #div7 {
        left: 375px;
        top: 450px;
    }

    #div8 {
        right: 425px;
        bottom: 575px;
    }

</style>


</head>


<body>


<div class="divs" id="div1">
    <h3>
        Chris
    </h3>
</div>



<div class="divs" id="div2">
    <h3>
        Chris
    </h3>
</div>



<div class="divs" id="div3">
    <h3>
        Chris
    </h3>
</div>



<div class="divs" id="div4">
    <h3>
        Chris
    </h3>
</div>



<div class="divs" id="div5">
    <h3>
        Lynch
    </h3>
</div>



<div class="divs" id="div6">
    <h3>
        Lynch
    </h3>
</div>



<div class="divs" id="div7">
    <h3>
        Lynch
    </h3>
</div>



<div class="divs" id="div8">
    <h3>
        Lynch
    </h3>
</div>




<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('div').keypress(function(e) {
        if (String.fromCharCode(e.which) == 'a') {
            $("div").animate({'top': '50px',
                                'width': '+=25px',
                                'height': '+=25px' }, 1000);


$(document).ready(function() {
    $('div').keypress(function(e) {
        if (String.fromCharCode(e.which) == 'a') {
            $("div").animate({'bottom': '50px',
                                'width': '-=25px',
                                'height': '-=25px' }, 1000);
}

</script>
</body>


</html>

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

В вашем скрипте много пропущенных } и ). Также div обычно не реагирует на события нажатия клавиш, потому что обычно не получает фокус клавиатуры; лучше использовать, например, document.

Кроме того, лучше анимировать, используя $('.divs') (вместо $('div')), чтобы предотвратить анимацию других элементов на странице.

Результат ниже; в конце концов, он может еще не выполнить то, что вам нужно, я исправил только технические проблемы, чтобы он работал и анимировался. 

$(document).ready(function() {

  $(document).keypress(function(e) {
    if (String.fromCharCode(e.which) == 'a') {
      console.log("Key: a");
      $(".divs").animate({
        'top': '50px',
        'width': '+=25px',
        'height': '+=25px'
      }, 1000);
    }
  });

  $(document).keypress(function(e) {
    if (String.fromCharCode(e.which) == 'b') {
      console.log("Key: b");
      $(".divs").animate({
        'bottom': '50px',
        'width': '-=25px',
        'height': '-=25px'
      }, 1000);
    }
  })
  
})
.divs {
  position: absolute;
  height: 100px;
  width: 100px;
  border: 2px solid red;
  background-color: yellow;
}

#div1 { left: 40px; top: 125px; }
#div2 { right: 45px; bottom: 27px; }
#div3 { left: 85px; top: 352px; }
#div4 { right: 258px; bottom: 323px; }

#div5 { left: 450px; top: 587px; }
#div6 { right: 198px; top: 498px; }
#div7 { left: 375px; top: 450px; }
#div8 { right: 425px; bottom: 575px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divs" id="div1"><h3>Chris</h3></div>
<div class="divs" id="div2"><h3>Chris</h3></div>
<div class="divs" id="div3"><h3>Chris</h3></div>
<div class="divs" id="div4"><h3>Chris</h3></div>

<div class="divs" id="div5"><h3>Lynch</h3></div>
<div class="divs" id="div6"><h3>Lynch</h3></div>
<div class="divs" id="div7"><h3>Lynch</h3></div>
<div class="divs" id="div8"><h3>Lynch</h3></div>
0 голосов
/ 04 марта 2020

Несколько вещей:

  1. Обычно вы не получаете события клавиатуры для div элементов. Вы должны сначала использовать атрибут tabindex в своих div-элементах, например <div class="divs" id="div1" tabindex="1">, для всех своих div-классов. Затем они будут вызывать событие клавиатуры, когда находятся в фокусе.

  2. Строка из charcode часто пишется с большой буквы, в зависимости от события. Я предлагаю сменить тест на String.fromCharCode(e.which).toLowerCase() == 'a', просто чтобы быть в безопасности.

  3. В ваших отрывках есть несколько пропущенных скобок. Если это не из-за копирования / вставки частичного скрипта, исправьте их тоже.

...