Question

所以，我一直在努力，仅仅为了知识，将我的一些jQuery转换成普通的，普通的javascript。我想就是否有更好的方法重新编写本文时得到一些评论。（它也在coffeescript中。）

脚本本身侦听元素上的单击事件，例如，找到与data-modal元素具有相同ID的类，然后将一个类附加到该元素，这基本上会弹出一个窗口。然后，overlay类会侦听click事件，该事件会删除之前附加的类'md-show'。它只是一个简单的脚本，添加和删除一个类以显示一个弹出窗口。

感谢您的帮助。

这是原始的jQuery：

    overlay = $('.md-overlay')
$('.md-trigger').click (e) ->
    modal = $(@).data 'modal'
    modalID = '#' + modal
    $(modalID).addClass 'md-show'
    e.preventDefault()
$('.md-close').click ->
    $("div[id^='modal']").removeClass 'md-show'
overlay.click ->
    $("div[id^='modal']").removeClass 'md-show'

这是转换为vanilla js：

    hasClass = (el, cl) ->
    regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)')
    !!el.className.match(regex)

overlay = document.getElementsByClassName('md-overlay')[0]
triggers = document.getElementsByClassName('md-trigger')
modals  = document.querySelectorAll("div[id^='modal']")

for i in [0...triggers.length]
    trigger = triggers[i]
    trigger.addEventListener 'click', (e) ->
        modal = this.getAttribute 'data-modal'
        modalID = document.getElementById(modal)
        modalID.classList.add 'md-show'
        return false

overlay.addEventListener 'click', ->
    for i in [0...modals.length]
        eachModal = modals[i]
        if hasClass(eachModal, 'md-show')
            eachModal.classList.remove 'md-show'

Answer 1

CoffeeScript会为您通过数组进行适当的迭代。所以

for i in [0...triggers.length]
    trigger = triggers[i]
    trigger.addEventListener 'click' ...

可以更简洁地写成：

for t in triggers
    t.addEventListener 'click' ...

尝试将一些jQuery转换为javascript

1 个答案: