将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％一样的，因为隐藏在雏形显现（这是这里折叠成一个班轮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') 
); 
});