Jquery Обратный вызов FadeTo не работает должным образом - PullRequest
Новая
       18

Jquery Обратный вызов FadeTo не работает должным образом

1 голос
/ 16 марта 2020

У меня есть несколько пунктов меню (буквально меню), некоторые из которых - глютен, вегетарианец, вегетарианец.

Сначала я хотел бы показать все, кроме кнопок, чтобы люди могли различить GF или Вегет или Веган. Для этого я бы хотел, чтобы элементы, которые не соответствуют выбранным критериям, выцветали до 50% непрозрачности. Или, более правильно, постепенно уменьшите непрозрачность до 50%, затем верните выбранные критерии к 100% непрозрачности. 

$("#gf").click(function() { 
    $('.all').fadeTo("fast",0.5, function() {
        $('.gf').fadeTo("fast",1);
    })

Работает угощение! Но затем, когда вы выбираете Vegatarian, он просто выделяет (прозрачность 1) вегетарианские блюда. Это не исчезает все. 

$(document).ready(function() {
  $("#all").click(function() {
    $('.all').fadeTo("fast", 1)
  });
  $("#none").click(function() {
    $('.all').fadeTo("fast", 0.5)
  });
  $("#gf").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.gf').fadeTo("fast", 1);
    })
  });
  $("#vege").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.vege').fadeTo("fast", 1)
    })
  });
  $("#vegan").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.vegan').fadeTo("fast", 1)
    })
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=all>All</div>
<div id=none>None</div>
<div id=gf>GF</div>
<div id=vege>Vegetarian</div>
<div id=vegan>Vegan</div>
<h1>Canapés - Cocktail party (1.5 piece per person)</H1>
<h2>Cold Canapés (1.5 pieces per serve)</H2>
<div class="all gf ">
  <p>Assorted Sushi Rolls, Wasabi mayo and Soy (GF)</p>
</div>
<div class="all vege ">
  <p>Carrot and Zucchini Fritters with Hummus (V)</p>
</div>
<div class="all vege ">
  <p>Mini Tart Cases with Smoked Salmon, Caper Salsa and/or Goat?s Cheese and Olive Tapenade (v)</p>
</div>
<div class="all gf ">
  <p>Smoked Salmon Crepes with Dill, Capers, Cream Cheese and Salmon Roe (GF)</p>
</div>
<div class="all ">
  <p>Sweet Corn Fritters with Avocado and Crispy Prosciutto</p>
</div>
<div class="all ">
  <p>Seared Tuna with Pickled Ginger, Wasabi and Sesame</p>
</div>
<div class="all ">
  <p>BBQ Duck Pancakes with Shallot, Cucumber and Hoi sin</p>
</div>
<div class="all gf ">
  <p>Oysters: natural or with toppings (crème fraiche and salmon roe, Tabasco etc.) (GF)</p>
</div>
<div class="all ">
  <p>Betel leaves with coconut, hot smoked trout, roe</p>
</div>
<div class="all ">
  <p>Chinese Spoons with Prawns, leaves, sesame dressing</p>
</div>
<div class="all vege ">
  <p>Assorted Bruschetta; wild mushroom /parmesan, tomato and buffalo mozzarella (V)</p>
</div>

Примечание: у меня есть функции None и All, чтобы доказать, что при моделировании как отдельных шагов процедура работает, как ожидалось. Просто не работает как обратный вызов.

1 Ответ

0 голосов
/ 25 марта 2020

Код говорит: $('.all').fadeTo, но у ваших классов div есть заглавная буква A <div class="All">

...