我试图让自己不再对几个项目使用 jQuery。下面是一个简单的例子，但我想用它来看看它是如何转换为非 jQuery 的，vanilla javascript：
$(function () {
console.log('jQuery is working.')
updateBillingSection();
$('select').on('change', function() {
updateBillingSection();
});
function updateBillingSection() {
// (1) If the plan is not of type=BUSINESS or INDIVIDUAL, hide the billing section
var INDIVIDUAL_PLAN = "INDIVIDUAL";
var BUSINESS_PLAN = 'BUSINESS'
var paidPlans = [INDIVIDUAL_PLAN, BUSINESS_PLAN]
var planType = $('select[name="plan_type"] option:selected').val();
console.log('Plan type: ' + planType);
if(paidPlans.includes(planType)) {
$('.paid-plan-details').show("slow");
} else {
$('.paid-plan-details').hide("slow");
}
}
}
我的问题有两个：
像在 jquery 中一样使用 CSS 选择器进行选择$('.paid-plan-details')变成document.querySelector('.paid-plan-details')
获取值$('select[name="plan_type"] option:selected').val()变为document.querySelector('select[name="plan_type"] option:selected').value
$('select').on('change', function() {}) 变成 document.querySelector('select').onchange = function() {}
一些指向正确方向的指针。查看所有详细信息的文档：https : //developer.mozilla.org/en-US/docs/Web/API/Document
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句