Javascript 使用选项对图像应用过滤器以实现搜索功能

您好，我正在尝试编写一个代码，允许我为特定字段设置选项，并显示符合已应用的过滤器要求的图像，一旦单击搜索按钮

这是到目前为止我的代码：正如您在下面的代码片段中看到的，我不知道如何向这些图像添加特定类别，然后搜索它们。例如，我将如何将（冒险、评级8+和一年的出版时间）添加到像pi这样的书籍中，然后将所有选项设置为所需，然后当我单击“搜索”时，仅显示包含相同类别的书籍。

。查看img{
光标：指针；
高度：160px；//高度
//宽度：30%；//宽度
}
#搜索区{
背景色：红色；
高度：150像素；
边际上限：0px；
文本对齐：居中；
}
#主要搜索字段{
填充顶部：66px；
背景色：红色；
}
。选择容器{
显示：内联块；
}

类型：

全部的
行动
冒险
动画
传记
喜剧片
罪行
纪录片
评级：

全部的
9+
8+
7+
6+
5+
4+
3+
2+
1+
订购人：

最新的
最老的
年
评级
喜欢
按字母顺序排列的

在jQuery中，您可以使用

val

方法检索{genre}和{ratings}选项的选定值：

var sSelectedGenre = $('select[name="genre"]').val().toLowerCase(); // lower case the text after getting its selected value
var sSelectedRating = $('select[name="rating"]').val().toLowerCase(); 

然后，您的每个标记必须具有特定的{genre}和{ratings}（例如data_-genre=“action”data_-rating=“6”）

为了获得进一步的指导，这里有一个示例JSFIDLE来帮助您： （您可以更好地重构此代码）

---

希望这对您的情况有所帮助。尽管我建议您在服务器端使用搜索过滤器功能来管理数据库（TSQL/SQL），但根据您希望合并的可扩展性程度，有不同的方法：

1） 对于低级别的可扩展性，您可以手动向每个图像添加HTML5

data-*

属性：

data-title="Life of Pi"
data-genre="adventure"
data-published="2001"
data-rating="8"

2） 为了获得更高级别的可伸缩性，您可以创建一系列客户端对象，每个对象代表一本书

var book = {
    title:"Life of Pi",
    genre:"adventure",
    published: 2001,
    rating: 8
    };

---

3） 为了获得高水平的可扩展性，您可以构建服务器端数据库，并通过诸如MySQL之类的查询语言对其进行查询。

此代码不起作用，但如果您仅添加选项（例如Latest），则此代码仅供参考。如果您查找上面的示例代码并自己进行实验，就可以知道接下来要做什么。同样，正如@Rounin所说，如果你想要客户端或服务器端的方法，这取决于你。你能解释一下客户端或服务器端方法之间的区别吗？这是非常普遍的。这是它的参考资料。softwareengineering.stackexchange.com/questions/171203/what-are-the-differences-between-server-side-and-client-side-programming您可以举一个js Fiddle的例子吗？您需要决定是采用客户端方法还是服务器端方法。你还需要考虑项目的规模。

data-title="Life of Pi"
data-genre="adventure"
data-published="2001"
data-rating="8"

var book = {
    title:"Life of Pi",
    genre:"adventure",
    published: 2001,
    rating: 8
    };