ФорумПрограммированиеJavaScript → Помогите чуть изменить скрипт

Помогите чуть изменить скрипт

  • Malin-ka

    Сообщения: 83 Репутация: N Группа: Кто попало

    Spritz 10 февраля 2010 г. 15:20

    Здравствуйте !
    Есть скриптик, до неприличия маленький. Может поэтому я и торможу :)
    В index.php :

    <div id="flavor-nav">
               <a rel="all" class="current">All</a>
               <a rel="cla">Classic</a>
               <a rel="adv">Adventurous</a>
               <a rel="tea">Tea-Inspired</a>
           </div>
           
           <br />
           
           
           <div id="all-flavors">

    <div class="flavor all cla">
           <img src="images/flavor-curry.jpg" alt="" />
           <h4>Sweet Curry With Saffron</h4>
           <p>Lusciously mellow with notes of overripe berries, 55% Hawaiian dark chocolate meets its soulmate in sweet curry - awash in spices including coriander, tumeric, cumin and cardamom and sprinkled with rare saffron. This spicy melange is slowly steeped in fresh coconut puree and gently blended with the chocolate. The taste rushes over you in waves - fragrant curry, chased by coconut, then the lingering, raisiny sweetness of chocolate. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>.</p>
           </div>
           
           <div class="flavor all adv">
           <img src="images/flavor-maccupiccu.jpg" alt="" />
           <h4>Machu Picchu</h4>
           <p>Caramelized cacao nibs, with the bitter hints of the luxurious chocolate it will become, take this truffle to new heights. The nibs are crushed into a ganache of 65% Peruvian chocolate with a light touch of cinnamon and vanilla bean. Gail tops it off with crushed and candied almonds. The interplay of smooth and crunchy make this a warmly indulgent taste trip. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a>, <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>, and <a href="/store/products/Single_Origin_Chocolate_Collection-6-2.html">Single Origin Collection</a>.</p>
           </div>

           <div class="flavor all tea">
           <img src="images/flavor-maccupiccu.jpg" alt="" />
           <h4>Machu Picchu</h4>
           <p>Caramelized cacao nibs, with the bitter hints of the luxurious chocolate it will become, take this truffle to new heights. The nibs are crushed into a ganache of 65% Peruvian chocolate with a light touch of cinnamon and vanilla bean. Gail tops it off with crushed and candied almonds. The interplay of smooth and crunchy make this a warmly indulgent taste trip. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a>, <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>, and <a href="/store/products/Single_Origin_Chocolate_Collection-6-2.html">Single Origin Collection</a>.</p>
           </div>

    </div>


    и к нему JS для жукери:

    $(function() {

    var newSelection = "";

    $("#flavor-nav a").click(function(){

       $("#all-flavors").fadeTo(200, 0.10);

    $("#flavor-nav a").removeClass("current");
    $(this).addClass("current");

    newSelection = $(this).attr("rel");

    $(".flavor").not("."+newSelection).slideUp();
    $("."+newSelection).slideDown();

       $("#all-flavors").fadeTo(600, 1);

    });

    });


    на всякий случай стили:

    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    body { font: 12px Georgia; }

    #page-wrap { width: 690px; margin: 20px auto; }

    h1 { font: 30px Georgia; margin: 0 0 10px 0;  }

    .flavor { margin: 0 0 15px 0; clear: both; overflow: hidden; }
    .flavor img { float: left; margin: 0 15px 0 0; }
    .flavor p { float: left; width: 460px; }
    #flavor-nav { margin: 0 0 15px 0; }
    #flavor-nav a { padding: 2px 6px; border: 1px solid #A74C10; }
    #flavor-nav a:hover, #flavor-nav a.current { background: #A74C10; color: white; }


    Первый див - это управление по классам с пом. rel.
    Второй див - таких может быть много и у каждого после all ставим свой класс. Все вроде просто.

    Но если классов не 1, а 2 ? Например афиша - события(кино, балет и т.д.) и места(театры, клубы и т.п.).
    Как в этом случае выбирать ?
  • VaseninM

    Сообщения: 2416 Репутация: N Группа: Адекваты

    Spritz 10 февраля 2010 г. 15:25, спустя 5 минут 33 секунды

    А где тут пхп то?
    Спустя 164 сек.
    И я не очень понял задачи. Первый див это какой? Какой айди или класс? А каких айди может быть много?
  • Malin-ka

    Сообщения: 83 Репутация: N Группа: Кто попало

    Spritz 10 февраля 2010 г. 16:00, спустя 34 минуты 58 секунд

    пхп нет
    <div id="flavor-nav"> - кнопки
    <div id="all-flavors"> - контейнер вывода
    <div class="flavor all cla"> - элемент вывода со своим классом cla. Вот их может быть много и у каждого может быть разный класс.

    Задача сделать тот же эффект, но при двух разных <div id="flavor-nav">

    мне удалось ответить ?…)
  • VaseninM

    Сообщения: 2416 Репутация: N Группа: Адекваты

    Spritz 10 февраля 2010 г. 16:11, спустя 10 минут 18 секунд

    Ну раз ПХП нет, то она не должна быть в разделе ПХП для начинающих. Во всяком случае я так думаю.
    По теме:
    <div id="flavor-nav1" class="flavor-nav">
    <div id="flavor-nav2" class="flavor-nav">
    $(function() {

    var newSelection = "";

    $(".flavor-nav a").click(function(){

    $("#all-flavors").fadeTo(200, 0.10);

    $(this).removeClass("current");
    $(this).addClass("current");

    newSelection = $(this).attr("rel");

    $(".flavor").not("."+newSelection).slideUp();
    $("."+newSelection).slideDown();

    $("#all-flavors").fadeTo(600, 1);

    });

    });

    Примерно так.
    Спустя 204 сек.
    Не пойму только вот этой части:
        $("#flavor-nav a").click(function(){ // Кликаем на ссылку, которая находится в элементе с аййди=флавор-нав. Теперь this = $("#flavor-nav a").

    $("#all-flavors").fadeTo(200, 0.10);

    $("#flavor-nav a").removeClass("current"); //Удаляем класс куррент из #flavor-nav a, который по сути равен this
    $(this).addClass("current"); //Добавляем класс куррент к this = #flavor-nav a
  • Malin-ka

    Сообщения: 83 Репутация: N Группа: Кто попало

    Spritz 10 февраля 2010 г. 18:14, спустя 2 часа 3 минуты 4 секунды

    ага, идею поняла, СПАСИБО !

Пожалуйста, авторизуйтесь, чтобы написать комментарий!