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



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

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

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

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 11м
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
Продвинутый
  • Онлайн:209д 16ч 24м
529
jQuery подключен?
    • 0
  • Наверх

OFFLINE Отправлено

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

jQuery подключен?

Нет


    • 0
  • Наверх

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

OFFLINE Отправлено

Leongram
Premium plus
  • Онлайн:41д 1ч 44м
100

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

Lеongram.com  - бесплатная программа для раскрутки в instаgram. Одобрено форумом ZiSMO.

 

Плюсы: Привлекает только живых подписчиков // Увеличивает активность профиля // Instagram не банит // Повышает продажи

 

post-132540-0-27634700-1554372735.png

 

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

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

 

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


Сообщение отредактировал Zismo-Support: 04 04 2019 - 13:13

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

OFFLINE Отправлено

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

jQuery подключен?

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


    • 0
  • Наверх

OFFLINE Отправлено

_Z_i_K_
Модератор
  • Онлайн:482д 3ч 35м
3 438

вопрос решен


5pHgCx4.jpg28.09.19e6vNEfI.jpg18.06.19               Нaкрутка в Instagram - zismo.biz/topic/965454
VBqed0I.png28.05.19gQnniuy.jpg14.06.19               Продажа поинтов ZISMO - zismo.biz/topic/832809

    • 0
  • Наверх