Member 13491039 Ответов: 1

Преобразование или изменение методов jquery в vanilla javascript

Всем привет,

Мне нужно иметь возможность изменить текущие методы JQuery на ванильные(обычные) части javascript. Полный код можно найти здесь (Edit fiddle - JSFiddle[^Обратите внимание, что ссылка не является спамом, скачиванием, продвижением и т.д. Это просто отображение в популярном инструменте/IDE результатов веб-страниц, которые используют большинство ИТ-сайтов/сайтов кодирования, особенно для веб-дизайна). К сожалению, внешние сайты или API не могут быть использованы (таким образом, причина конверсии). Я также понимаю, что jquery является частью javascript, но это не то, что я ищу. Я хочу преобразовать оставшиеся сегменты jquery в работоспособный javascript. :)

Что я уже пробовал:

Here's what I've tried so far:

Before:
$(".heading").each(function() {
  var $this, colors;
  $this = $(this);
  colors = getColors();
  $this.css({"backgroundColor": colors[0], "color": colors[1], "fontFamily": getFont()});
});

After:
document.querySelectorAll(".heading").forEach(function(head) {
  var colors = getColors();
  head.setAttribute("style", "backgroundColor: " + colors[0] + "; color: " + colors[1] + "; fontFamily: " + getFont() + ";");
});

The Second Before:

<pre>$("body").keyup(function(e) {
  var colors = getColors();
  if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
    $("<div class='letter'>" + String.fromCharCode(e.which) + "</div>").appendTo(".paper").css({
      "backgroundColor": colors[0],
      "color": colors[1],
      "fontFamily": getFont(),
      "fontSize": getSize(),
      "padding": getPadding(),
      "marginRight": getMargin(),
      "transform": getTransform()
    }).wrap("<div class='zoom'>");
  }


2-я часть
if(e.which==13) {
    $("<br>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if(e.which==32) {
    $("<span class='letter space'>  </span>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if(e.which==46) {

  }
});


Я изо всех сил пытаюсь преобразовать вторую переднюю и 2-ю часть успешно в работоспособный Javascript. Если есть доступный инструмент, который это делает, не стесняйтесь добавлять (также был бы признателен). Я читал на многих сайтах, смотрел на ссылку Mozilla и гуглил, но не смог успешно найти работоспособное и понятное решение. Возможно, полезный эксперт(ы) по Javascript мог бы решить эту дилемму?

Sinisa Hajnal

jQuery - это открытый исходный код, возьмите нужную вам функцию из исходного файла и используйте ее вместо jQuery - > вам может понадобиться следовать зависимостям через несколько функций. Удачи

1 Ответов

Рейтинг:
0

Karthik_Mahalingam

пробовать

var allheadings = document.getElementsByClassName('heading');
for (var i = 0; i < allheadings.length; i++) {
    var heading = allheadings[i];
    var colors = getColors();
    heading.style.backgroundColor = colors[0];
    heading.style.color = colors[1];
    heading.style.fontFamily = getFont()
}

document.body.addEventListener("keyup", function (e) {
    if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
        var div = document.createElement('div');
        div.className = 'letter';
        div.innerText = String.fromCharCode(e.which);

        var papers = document.getElementsByClassName('paper');
        for (var i = 0; i < papers.length; i++) {
            var paper = papers[i];
            var zoom = document.createElement('div');
            zoom.className = 'zoom';
            zoom.appendChild(paper);
            paper.appendChild(div);
            paper.style.backgroundColor = colors[0];
            paper.style.color = colors[1];
            paper.style.fontFamily = getFont();
            paper.style.fontSize = getSize();
            paper.style.padding = getPadding();
            paper.style.marginRight = getMargin();
            paper.style.transform = getTransform();
        }


        if (e.which == 13) {
            var papers = document.getElementsByClassName('paper');
            for (var i = 0; i < papers.length; i++) {
                var paper = papers[i];
                paper.style.backgroundColor = 'transparent'
                var br = document.createElement('br');
                paper.appendChild(br);
            }

        }
        if (e.which == 32) {
            var papers = document.getElementsByClassName('paper');
            for (var i = 0; i < papers.length; i++) {
                var paper = papers[i];
                paper.style.backgroundColor = 'transparent'
                var br = document.createElement('br');
                var span = document.createElement('span');
                span.className = 'letter space';
                paper.appendChild(br);
                paper.appendChild(span);
            }

            
        }
        if (e.which == 46) {

        }
    }
});

Member 13491039

Здравствуйте Картик, спасибо. Я включил этот код в следующее Здесь: https://jsfiddle.net/ztpsp1vo/1/ однако никакие буквы не отображаются при вводе/вводе пользователем, а также тип в любом месте исчезает. Хотя, похоже, что там 89%!

Karthik_Mahalingam

попробуйте использовать отладчик и запускать построчно.