プロトタイプJSにjQueryを変換

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

（ワンライナーtoggleにここに崩壊している）プロトタイプで非表示と表示が瞬時であるため、同じ100％仕事に行くのではありません。あなたが書いたようにアイテムを200ms以上動かすには、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') 
); 
});