Перейти к содержимому



Купить ссылку здесь
Фотография

КНОПКА МЕНЯЮЩАЯ КАРТОЧКИ ТОВАРА HTML CSS JS

Форум ZiSMO.biz
  • Закрытая тема Тема закрыта
4
Сообщений в теме: 4

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 3ч 20м
0

Здравствуйте. Не пойму где ошибка в коде. Кнопки должны менять карточки товара, но при нажатии на них ничего не происходит и в консоле следующий код ошибки: script.js:1 Uncaught ReferenceError: $ is not defined

    at script.js:1         (ссылка на картинку Ссылка
 
Сам код:
HTML
 
<div class="row">


<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">ВЕНИК</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка одноразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро одноразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Веник двухразовый</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка двухразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро двухразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Веник трехразовый</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка трехразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>


<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро трехразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




</div>


</div>

CSS

* {
  box-sizing: border-box;
}
 
/* 360-28-30 */
 
.container{
  max-width: 960px;
  margin: 3rem auto;
}
 
 
.choice{
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
 
.choice-item{
  padding: .4rem 1rem;
  border: 1px solid black;
  margin-right: 1rem;
  cursor: pointer;
}
 
.choice-item:last-of-type{
  margin-right: 0;
}
 
.choice-active{
  background-color: olive;
  color: white;
}
 
.row{
  display: flex;
  flex-wrap: wrap;
}
 
 
.product{
 width: 33.333%;
padding: 1rem;
}
 
.product-img{
display: block;
width: 100%;
height: auto;
}
 
.product-name{
  text-align: center;
}
 
.product-description{
  text-align: center;
}
 
.product-cost{
  color: blue;
  font-size: 2rem;
  text-align: center;
  margin-top: 0;
}

JS

var product = $('.product');
 
$('#choice > .choice-item').click(
function(){
  productChoice($(this));
});
 
function productChoice(self){
  self.siblings().removeClass('choice-active');
  self.addClass('choice-active');
  var productCategory = self.attr('data-choice');
  if(productCategory != 'all'){
    product.map(
      function(){
        if($(this).attr('data-category') === productCategory){
          $(this).css('display','block');
        }
        else{
          $(this).css('display','none');
        }
      }
    );
  }
  else{
    product.css('display','block');
  }
}

Заранее спасибо. 

 


    • 0
  • Наверх

Поделиться этим:

OFFLINE Отправлено

litelfut
Продвинутый
  • Онлайн:201д 50м
511
jQuery подключен?
    • 0
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 3ч 20м
0

jQuery подключен?

Нет


    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

Leongram
Premium plus
  • Онлайн:41д 53м
87

*
Популярное сообщение!

Внимание! Вышла новая версия программы Lеongram.com 3.0 - лучшая бесплатная программа для раскрутки в instаgram по мнению форума ZiSMO. 

 

Функции: Подписка ++ Отписка ++ Лайкинг ++ Автопостинг ++ Планировщик ++ Отмечалка по фото ++ Чистка от ботов

in-img1.png

В первый же день привлечете новых клиентов. Instagrаm не банит. Увеличится количество живых подписчиков, лайков и комментариев сразу же.

[Скачать бесплатно]

 

Функций больше, чем в других программах ++ Пользуйтесь бесплатно без ограничений по времени ++ Можно не оставлять компьютер включенным. 


Сообщение отредактировал The_Dark: 21 09 2018 - 23:50

Изображение
    • 45
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 3ч 20м
0

jQuery подключен?

Спасибо, подключил, всё заработало. 


    • 0
  • Наверх

OFFLINE Отправлено

_Z_i_K_
Модераторы
  • Онлайн:457д 21ч 8м
3 372

вопрос решен


5pHgCx4.jpg28.04.19e6vNEfI.jpg18.06.19               Бесплaтные лaйки Instagram - zismo.biz/topic/964757
VBqed0I.png28.02.19gQnniuy.jpg14.06.19             Продажа поинтов ZISMO - zismo.biz/topic/832809

    • 0
  • Наверх