Question

我需要将以下jQuery转换为Prototype JS。

perl -e 'use Fcntl;sysopen(F,"/proc/loadavg",O_RDONLY);sysread(F,$_,2048); print '

我试一试，但我对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");
  }
});

Answer 1

试试这个：

$(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

1 个答案: