將jQuery轉換為Prototype JS

Question

我需要將以下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");
    }
  }

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')
  );
});