Javascript 与使用jquery过滤图像相关的问题
我正在使用jquery进行简单的图像过滤项目,我有一个名为“数据类型”的数据属性,其中包含多个值 例如:数据类型=“科幻、警察、神秘、心理” 当我的数据类型只有一个值时,比如data green=“action”,我可以过滤包含动作类型的图像(通过在选择框中选择动作类型) 但正如你们所知,一部动画可以有多种类型,所以当我添加多个值(如上面的示例)时,它不会显示任何我想要的jquery代码,当我在选择框中选择警察类型时,它应该循环通过数据类型的多个值并显示警察类型的图像 这是我的源代码 HTML代码:Javascript 与使用jquery过滤图像相关的问题,javascript,jquery,html,css,filtering,Javascript,Jquery,Html,Css,Filtering,我正在使用jquery进行简单的图像过滤项目,我有一个名为“数据类型”的数据属性,其中包含多个值 例如:数据类型=“科幻、警察、神秘、心理” 当我的数据类型只有一个值时,比如data green=“action”,我可以过滤包含动作类型的图像(通过在选择框中选择动作类型) 但正如你们所知,一部动画可以有多种类型,所以当我添加多个值(如上面的示例)时,它不会显示任何我想要的jquery代码,当我在选择框中选择警察类型时,它应该循环通过数据类型的多个值并显示警察类型的图像 这是我的源代码 HTML代
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Anime Filter</title>
<style>
*{
margin: 0 auto;
padding: 0 auto
box-sizing: border-box;
}
.an-filterbar{
text-align: center;
margin: 50px;
}
.ps-page{
margin: 100px;
}
.ps-page .ps-links{
margin-left: 30px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div class="an-filterbar">
<label for="an-search"><b>Type :</b></label>
<select class="type">
<option value="all">All</option>
<option value="tvseries">Tv series</option>
<option value="movie">Movie</option>
</select>
<br>
<label for="an-search"><b>Genre :</b></label>
<select class="genre">
<option value="all">All</option>
<option value="action">Action</option>
<option value="adventure">Adventure</option>
<option value="cars">Cars</option>
<option value="comedy">Comedy</option>
<option value="police">Police</option>
</select>
<br>
<label for="an-search"><b>Year :</b></label>
<select class="year">
<option value="all">All</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
<br>
<label for="an-search"><b>Season :</b></label>
<select class="season">
<option value="all">All</option>
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<br>
<label for="an-search"><b>Status :</b></label>
<select class="status">
<option value="all">All</option>
<option value="airing">Airing</option>
<option value="finished">Finished</option>
<option value="notyetaired">Not yet Aired</option>
</select>
<br>
</div>
<div class="ps-page">
<div class="ps-links" data-type="movie" data-genre="adventure, comedy, action" data-year="1990" data-season="summer" data-status="notyetaired">
<a href="">
<figure>
<img src="assets/pimg-6.jpg" alt="Eizouken ni wa te wo dasu na">
<figcaption>
<b>Rating : N/R</b><br>
Eizouken ni wa te wo dasu na
</figcaption>
</figure>
</a>
</div>
<div class="ps-links" data-type="tvseries" data-genre="adventure, cars" data-year="1991" data-season="fall" data-status="airing">
<a href="">
<figure>
<img src="assets/pimg-7.jpg" alt="Somali to mori no kamisama">
<figcaption>
<b>Rating : N/R</b><br>
Somali to mori no kamisama
</figcaption>
</figure>
</a>
</div>
<div class="ps-links" data-type="tvseries" data-genre="action, comedy, cars" data-year="1992" data-season="summer" data-status="finished">
<a href="">
<figure>
<img src="assets/pimg-8.jpg" alt="Jibaku shounen hanako-kun">
<figcaption>
<b>Rating : N/R</b><br>
Jibaku shounen hanako-kun
</figcaption>
</figure>
</a>
</div>
<div class="ps-links" data-type="movie" data-genre="sci-fi, police, mystery, psychological" data-year="1993" data-season="spring" data-status="finished">
<a href="">
<figure>
<img src="assets/pimg-9.jpg" alt="Plunderer">
<figcaption>
<b>Rating : N/R</b><br>
Plunderer
</figcaption>
</figure>
</a>
</div>
</div>
<script>
$("select.type, select.genre, select.year, select.season, select.status").change(updateCategories);
function updateCategories() {
//get all the values
var caType = $('select.type').val();
var caGenre = $('select.genre').val();
var caYear = $('select.year').val();
var caSeason = $('select.season').val();
var caStatus = $('select.status').val();
$('.ps-page')
.find('.ps-links')
.hide()
.filter(function () {
var okcaType = true;
if(caType !== "all"){
okcaType = $(this).attr('data-type') === caType;
}
var okcaGenre = true;
if(caGenre !== "all"){
okcaGenre = $(this).attr('data-genre') === caGenre;
}
var okcaYear = true;
if(caYear !== "all"){
okcaYear = $(this).filter('data-year') === caYear;
}
var okcaSeason = true;
if(caSeason !== "all"){
okcaSeason = $(this).attr('data-season') === caSeason;
}
var okcaStatus = true;
if(caStatus !== "all"){
okcaStatus = $(this).attr('data-status') === caStatus;
}
//only fade a image if it satisfies all five conditions
return okcaType && okcaGenre && okcaYear && okcaSeason && okcaStatus;
}).fadeIn('fast');
}
</script>
</body>
</html>
动画过滤器
*{
保证金:0自动;
填充:0自动
框大小:边框框;
}
.过滤器{
文本对齐:居中;
利润率:50像素;
}
.ps页{
利润率:100像素;
}
.ps页面.ps链接{
左边距:30px;
浮动:左;
文本对齐:居中;
}
类型:
全部的
电视剧
电影
体裁:
全部的
行动
冒险
汽车
喜剧片
警方
年份:
全部的
1990
1991
1992
1993
1994
季节:
全部的
冬天
春天
夏天
落下
地位:
全部的
晾晒
完成了
尚未播出
$(“select.type,select.genre,select.year,select.seasure,select.status”).change(updateCategories);
函数updateCategories(){
//获取所有值
var caType=$('select.type').val();
var caGenre=$('select.genre').val();
var caYear=$('select.year').val();
var caSeason=$('select.season').val();
var caStatus=$('select.status').val();
$(“.ps页”)
.find(“.ps链接”)
.hide()
.filter(函数(){
var-okcaType=true;
如果(caType!=“全部”){
okcaType=$(this.attr('data-type')==caType;
}
var-okcaGenre=true;
如果(caGenre!=“全部”){
okcaGenre=$(this.attr(‘数据类型’)==caGenre;
}
var okcaYear=真;
如果(caYear!=“全部”){
okcaYear=$(this).filter('data-year')==caYear;
}
var-okcaSeason=true;
如果(caSeason!=“全部”){
okcaSeason=$(this.attr('data-season')==caSeason;
}
var okcaStatus=真;
如果(卡斯塔斯!=“全部”){
okcaStatus=$(this.attr('data-status')==卡斯塔斯;
}
//仅当图像满足所有五个条件时才使其褪色
返回okcaType&&OKCACENRE&&okcaYear&&OKCASON&&okcaStatus;
}).fadeIn(“快速”);
}
尝试此代码并在“选择”框中选择其中一种类型,它不会显示任何图像
我希望解决方案能够适合我的代码(不更改整个代码)并解释其工作原理。您需要将数据类型属性拆分为一个数组,并检查该数组中是否存在所选类型
if (caGenre !== "all") {
var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
okcaGenre = genreArray.indexOf(caGenre) !== -1;
}
如您所见,我已将数据类型字符串拆分为一个数组,并删除了每个项目周围的空格
更新代码:
function updateCategories() {
//get all the values
var caType = $('select.type').val() || 'all';
var caGenre = $('select.genre').val() || 'all';
var caYear = $('select.year').val() || 'all';
var caSeason = $('select.season').val() || 'all';
var caStatus = $('select.status').val() || 'all';
$('.ps-page')
.find('.ps-links')
.hide()
.filter(function () {
var okcaType = true;
if (caType !== "all") {
okcaType = $(this).attr('data-type') === caType;
}
var okcaGenre = true;
if (caGenre !== "all") {
var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
okcaGenre = genreArray.indexOf(caGenre) !== -1;
}
var okcaYear = true;
if (caYear !== "all") {
okcaYear = $(this).filter('data-year') === caYear;
}
var okcaSeason = true;
if (caSeason !== "all") {
okcaSeason = $(this).attr('data-season') === caSeason;
}
var okcaStatus = true;
if (caStatus !== "all") {
okcaStatus = $(this).attr('data-status') === caStatus;
}
//only fade a image if it satisfies all five conditions
return okcaType && okcaGenre && okcaYear && okcaSeason && okcaStatus;
}).fadeIn('fast');
}
您需要将数据类型属性拆分为一个数组,并检查该数组中是否存在所选类型
if (caGenre !== "all") {
var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
okcaGenre = genreArray.indexOf(caGenre) !== -1;
}
如您所见,我已将数据类型字符串拆分为一个数组,并删除了每个项目周围的空格
更新代码:
function updateCategories() {
//get all the values
var caType = $('select.type').val() || 'all';
var caGenre = $('select.genre').val() || 'all';
var caYear = $('select.year').val() || 'all';
var caSeason = $('select.season').val() || 'all';
var caStatus = $('select.status').val() || 'all';
$('.ps-page')
.find('.ps-links')
.hide()
.filter(function () {
var okcaType = true;
if (caType !== "all") {
okcaType = $(this).attr('data-type') === caType;
}
var okcaGenre = true;
if (caGenre !== "all") {
var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
okcaGenre = genreArray.indexOf(caGenre) !== -1;
}
var okcaYear = true;
if (caYear !== "all") {
okcaYear = $(this).filter('data-year') === caYear;
}
var okcaSeason = true;
if (caSeason !== "all") {
okcaSeason = $(this).attr('data-season') === caSeason;
}
var okcaStatus = true;
if (caStatus !== "all") {
okcaStatus = $(this).attr('data-status') === caStatus;
}
//only fade a image if it satisfies all five conditions
return okcaType && okcaGenre && okcaYear && okcaSeason && okcaStatus;
}).fadeIn('fast');
}
代码中没有下拉列表。你能检查一下你的问题中的代码是否正确吗?是的,我没有添加选择标签,因为它太大了。我希望类型选择标签有助于解决我的问题。你能把它放在某个地方吗?因为我想看到整个代码?如果可能的话。在你的实际代码中,有5个选择标签,对吗?代码中没有下拉列表。你能检查一下你的问题中的代码是否正确吗?是的,我没有添加选择标签,因为它太大了。我希望类型选择标签有助于解决我的问题。你能把它放在某个地方吗?因为我想看到整个代码?如果可能的话。另外,在您的实际代码中,有所有5个select标记,对吗?我刚刚对您在第一个代码框(三行代码)中指定的jquery类型代码进行了更改。但是,当我试图复制整个更新的代码时,它根本没有显示任何更改,可能是因为在变量末尾添加了“all”值。由于您没有在代码中添加其他select元素,我添加了“all”以避免错误。非常欢迎。我刚刚对我的jquery类型代码进行了更改,您在第一个代码框(三行代码)中指定了这些代码。但是,当我试图复制整个更新的代码时,它根本没有显示任何更改,可能是因为在变量末尾添加了“all”值。由于您没有在代码中添加其他select元素,我添加了“all”以避免错误。不客气。