Простое утверждение, написанное с помощью jQuery, Как бы я написал это с PrototypeJS

Question

заявление написано с помощью jQuery

$("#productNav li a").click(function(){
$("#productNav li a").removeClass("selectedProd");
$(this).addClass("selectedProd");
$("#productListCntnr > ul").slideUp(300);
$("#productListCntnr > ul."+this.id).slideDown(300);
});

Answer 1

Пока я думал об этом, Марк уже ответил, но я придумал следующее:

$$("#productNav li a").observe('click', function(event){
  $$("#productNav li a").invoke('removeClassName', 'selectedProd'));
  $$("#productListCntnr > ul").invoke('SlideUp',{ duration: 3.0 });
  Event.element(event).invoke('addClassName', 'selectedProd'));
  $$("#productListCntnr > ul#"+Event.element(event).id).invoke('SlideDown',{ duration: 3.0 });
});

Методы SlideUp и SlideDown взяты из Scriptaculous, не уверен, что они напрямую совместимы с эффектом jQuery. Я также предположил, что вы имели в виду ul# в последней строке, так как вы выбираете по ID, и в этом случае, поскольку ID в любом случае уникален, вы, вероятно, могли бы сделать это так:

Effect.SlideDown(Event.element(event).id, { duration: 3.0 });

- редактирование

После комментария Марка я попробовал использовать приведенный выше код в реальном браузере, вот рабочая версия:

Event.observe(window, 'load', function() {
    $$("#productNav li a").invoke('observe', 'click', function(event){
        $$("#productNav li a.selectedProd").invoke('removeClassName', 'selectedProd');
        Event.element(event).addClassName('selectedProd');
        Effect.Pulsate(Event.element(event).id, { pulses: 5, duration: 3.0 });
    });
});

Я не был уверен, что SlideUp должен был делать, поэтому я взял его, полагаю, он не работает с теми же элементами списка, что и в productNav? SlideDown, похоже, тоже ничего не делал, возможно потому, что SlideUp исчез, поэтому я поменял его на Pulsate, просто чтобы убедиться, что он работает. Мне пришлось использовать альтернативный синтаксис, который я упомянул выше, так как оригинал вообще не работал (возникла ошибка, такая как метод invoke для элемента не существует).

Я предполагаю, что оригинальный код предназначен для SlideUp и SlideDown области содержимого, отдельной от пунктов меню? В этом случае этот код придется изменить, но ваш исходный html также будет недействительным, поскольку это будет означать, что элементы списка в меню и элементы списка в области содержимого имеют одинаковые идентификаторы. Для справки, вот как выглядит мой HTML:

<ul id="productNav">
    <li><a id="p1" href="#">Product 1</a></li>
    <li><a id="p2" href="#">Product 2</a></li>
    <li><a id="p3" href="#">Product 3</a></li>
    <li><a id="p4" href="#">Product 4</a></li>
    <li><a id="p5" href="#">Product 5</a></li>
    <li><a id="p6" href="#">Product 6</a></li>
</ul>

Answer 2

Я не уверен в том, как лучше всего справляться со скользящими вещами, которые вы делаете, но это должно выполнять основную механику щелчка и добавления / удаления выбранного CSS-классаProPro.

Event.observe(window, 'load', function() {
    //When the window loads, iterate over all of the appropriate <a> tags
    $$('#productNav li a').each( function(elem) {

        //Handle the click event on each a tag
        Event.observe(elem, 'click', function(event) {
            //Remove the selectedProd class from all <a> tags
            $$('#productNav li a').each( function(elem) {
                elem.removeClassName('selectedProd');
            });

            //Add the selectedProd class to the <a> tag that was clicked
            this.addClassName('selectedProd');

            //Stop the browser from following the link specified in the href=""
            Event.stop(event);
        });
    });
});