Преобразование jQuery в прототип 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%, то же самое, потому что скрыть и показать в прототипе (которые свернуты здесь в однострочника toggle) являются мгновенными. Если вы хотите, чтобы элемент переходил на 200 мс, как вы его написали, вам нужно будет использовать эффекты перехода CSS.

Если кнопка управляет более одного элемента (если более чем один элемент в DOM соответствует тому, что вы вошли в данных целевого атрибута), то вы изменили бы это очень немного:

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