将 jQuery 转换为原型 JS
Convert jQuery to Prototype JS
我需要将以下 jQuery 转换为 Prototype JS。
jQuery("button.btn-transcript").click(function() {
tsTarget = jQuery(this).attr("data-target");
if (jQuery(this).hasClass("collapsed")) {
jQuery(tsTarget).show(200);
jQuery(this).removeClass("collapsed");
jQuery(this).attr("area-expanded","true");
} else {
jQuery(tsTarget).hide(200);
jQuery(this).addClass("collapsed");
jQuery(this).attr("area-expanded","false");
}
});
我尝试了一下,但我对 JS 原型不太熟悉。我的方向对吗?
$("button.btn-transcript").on('click', 'button.btn-transcript', function(event, el)) {
transTarget = $(this).readAttribute("data-target");
function(event,el) {
if($(this).hasClassName("collapsed")) {
$("transTarget").show();
$(this).removeClassName("collapsed");
$(this).writeAttribute("area-expanded", "true");
} else {
$("transTarget").hide();
$(this).addClassName("collapsed");
$(this).writeAttribute("area-expanded", "false");
}
}
试试这个:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTarget = $$(elm.readAttribute('data-target')).first();
elm.toggleClassName('collapsed');
tsTarget.toggle();
elm.writeAttribute('aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true'));
});
它不会 100% 一样地工作,因为在 Prototype 中隐藏和显示(在此处折叠成一行 toggle
)是瞬时的。如果您希望项目按照您编写的方式过渡超过 200 毫秒,则需要使用 CSS 过渡效果。
如果您的按钮控制多个项目(如果 DOM 中的多个元素与您在 data-target 属性中输入的内容相匹配),那么您可以稍微更改一下:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTargets = $$(elm.readAttribute('data-target'));
elm.toggleClassName('collapsed');
tsTargets.invoke('toggle');
elm.writeAttribute(
'aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true')
);
});
我需要将以下 jQuery 转换为 Prototype JS。
jQuery("button.btn-transcript").click(function() {
tsTarget = jQuery(this).attr("data-target");
if (jQuery(this).hasClass("collapsed")) {
jQuery(tsTarget).show(200);
jQuery(this).removeClass("collapsed");
jQuery(this).attr("area-expanded","true");
} else {
jQuery(tsTarget).hide(200);
jQuery(this).addClass("collapsed");
jQuery(this).attr("area-expanded","false");
}
});
我尝试了一下,但我对 JS 原型不太熟悉。我的方向对吗?
$("button.btn-transcript").on('click', 'button.btn-transcript', function(event, el)) {
transTarget = $(this).readAttribute("data-target");
function(event,el) {
if($(this).hasClassName("collapsed")) {
$("transTarget").show();
$(this).removeClassName("collapsed");
$(this).writeAttribute("area-expanded", "true");
} else {
$("transTarget").hide();
$(this).addClassName("collapsed");
$(this).writeAttribute("area-expanded", "false");
}
}
试试这个:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTarget = $$(elm.readAttribute('data-target')).first();
elm.toggleClassName('collapsed');
tsTarget.toggle();
elm.writeAttribute('aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true'));
});
它不会 100% 一样地工作,因为在 Prototype 中隐藏和显示(在此处折叠成一行 toggle
)是瞬时的。如果您希望项目按照您编写的方式过渡超过 200 毫秒,则需要使用 CSS 过渡效果。
如果您的按钮控制多个项目(如果 DOM 中的多个元素与您在 data-target 属性中输入的内容相匹配),那么您可以稍微更改一下:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTargets = $$(elm.readAttribute('data-target'));
elm.toggleClassName('collapsed');
tsTargets.invoke('toggle');
elm.writeAttribute(
'aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true')
);
});