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