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

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

Сначала я хотел бы показать все, кроме кнопок, чтобы люди могли отличить 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>

Примечание. У меня есть функции «Нет» и «Все», чтобы доказать, что при моделировании отдельных шагов процедура работает так, как ожидалось. Просто не работает как обратный вызов.


jquery fadeto
person AusS2000    schedule 16.03.2020    source источник
comment
ваш вопрос технически не ясен. уточнить это больше   -  person Harsimranjit Singh    schedule 16.03.2020
comment
Как? Что еще нужно знать?   -  person AusS2000    schedule 17.03.2020
comment
Как насчет ссылки на реальную страницу? cnb.byteserve.com.au/menuitems.taf   -  person AusS2000    schedule 18.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

person vsmash    schedule 24.03.2020
comment
В приведенном выше примере кода я использовал строчные буквы «все» для div и класса. В связанном примере я сделал класс «Все», чтобы лучше различать его в коде. Но в каждом примере это последовательно, а не причина проблемы. - person AusS2000; 25.03.2020