Reference error?
A mai napon problémába ütköztem ezzel:
Elvileg így kéne kinéznie: https://codepen.io/vybz/pen/ZbbexZ
Tudnátok segíteni,hogy mi lehet a probléma? A dinamikus részét nem akarja valamiért... Nem reagál a keresőre,illetve a megadott kulcsszavakat sem írja ki.
Uncaught ReferenceError: $ is not defined
<anonymous> file:///C:/Users/***/Desktop/searchable/js.js:2
<anonymous> file:///C:/Users/***/Desktop/searchable/js.js:48
HTML fájl/Neve: index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="30">
<meta charset="utf-8">
<Link rel="stylesheet" href="css/style.css">
<script src="js.js"></script>
</head>
<body>
<div class="container">
<div id="buttons"></div>
<div id="search">
<label for="filter-search">Search : </label>
<input type="text" placeholder="..." id="filter-search" />
</div>
<div id="gallery">
<img data-tags="Animators, Illustrators" src="https://placeimg.com/351/220/animals" alt="barkeeper" />
<img data-tags="Photographers,Filmmakers" src="https://placeimg.com/351/220/poeple" alt="disco ball" />
<img data-tags="Photographers,Filmmakers" src="https://placeimg.com/351/220/arch" alt="Bar" />
<img data-tags="Designers" src="https://placeimg.com/351/220/nature" alt="Tokyo" />
<img data-tags="Filmmakers" src="https://placeimg.com/351/220/tech" alt="Dj" />
<img data-tags="Designers" src="https://placeimg.com/351/220/animals/grayscale" alt="Guitar" />
<img data-tags="Animators,Photographers" src="https://placeimg.com/351/220/poeple/grayscale" alt="Other" />
<img data-tags="Designers" src="https://placeimg.com/351/220/arch/grayscale" alt="Reception" />
<img data-tags="Animators, Illustrators" src="https://placeimg.com/351/220/nature/grayscale" alt="bottles" />
<img data-tags="Animators, Illustrators" src="https://placeimg.com/351/220/tech/grayscale" alt="bottles" />
</div>
</div>
</body>
</html>
CSS fájl/NEVE: style.css
.container {
width: 1170px;
margin: 0 auto;
}
#gallery {
border: 1px solid #efefef;
padding: 4px 0 0 0;
}
#gallery img {
margin: 8px;
width: 214px;
cursor: pointer;
border-radius: 3px;
}
#gallery img:hover {
margin: 8px;
opacity: .8;
}
header h1 {
font-weight: 700;
margin-left: 8px;
}
#buttons button {
border: 1px solid #efefef;
margin-right: 8px;
border: 0;
padding: 8px;
border-radius: 3px;
}
#buttons button.active {
background-color: #bbb;
color: #111;
}
#buttons {
margin: 8px;
padding-bottom: 8px;
}
#search {
margin: 8px;
}
input[type="text"]{
border-radius: 3px;
border: 1px solid #efefef;
padding: 0 8px;
}
button:hover{
background-color: #111;
color: #fff;
}
JS FÁJL/NEVE: js.js
(function() {
var $imgs = $('#gallery img');
var $buttons = $('#buttons');
var tagged = {};
$imgs.each(function() {
var img = this;
var tags = $(this).data('tags');
if (tags) {
tags.split(',').forEach(function(tagName) {
if (tagged[tagName] == null) {
tagged[tagName] = [];
}
tagged[tagName].push(img);
})
}
})
$('<button/>', {
text: 'Show All',
class: 'active',
click: function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
$imgs.show();
}
}).appendTo($buttons);
$.each(tagged, function(tagName) {
var $n = $(tagged[tagName]).length;
$('<button/>', {
text: tagName + '(' + $n + ')',
click: function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
$imgs
.hide()
.filter(tagged[tagName])
.show();
}
}).appendTo($buttons);
});
}())
(function() {
var $imgs = $('#gallery img');
var $search = $('#filter-search');
var cache = [];
$imgs.each(function() {
cache.push({
element: this,
text: this.alt.trim().toLowerCase()
})
})
function filtear() {
var query = this.value.trim().toLowerCase();
cache.forEach(function(img) {
var index = 0;
if (query) {
index = img.text.indexOf(query);
}
img.element.style.display = index === -1 ? 'none' : '';
})
}
if ('oninput' in $search[0]) {
$search.on('input', filter);
} else {
$search.on('keyup', filter);
}
}())
válasza:két dolog miatt:
- nem adtad hozzá a jquery-t
<script src=" [link] integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
a <script src="js.js"></script> elé tedd
- elírtad: function filtear() {
filtear -> filter
válasza:gyakori levágja kicsit a linket, innen kitudod másolni: [link]
</> gomb, a jquery.min.js kell csak
Uncaught TypeError: right-hand side of 'in' should be an object, got undefined
if ('oninput' in $search[0]) {
Valamiért nagyon nem akarja :D
jquery nélkül tudok esetleg egy hasonlót csinálni? :D
válasza:ide rakd fel a kódot: [link]
és akkor olvasható marad
További kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!