Javascript 传送带分类系统？

我正在使用，并且我的图像有类别，当我单击任何类别时，我的图像必须随单击的类别而更改，我如何才能做到这一点？有什么例子吗

我的a[data id]是类别图像和我的liid类别名称

我想与大家分享我的结构，请看：

$document.readyfunction{ $'.mySlideShow'.cycle{ pauseOnHover:是的， 传呼机：单页传呼机， 日志：错误， 页面模板：， 幻灯片：>a }; $.mySlideShow.lightGallery{ exThumbImage：数据exThumbImage， 下载：错， 是的， loadYoutubeThumbnail:true， youtubeThumbSize:“默认值”， loadVimeoThumbnail:true， vimeoThumbSize:“缩略图_中等”， }; } .单廊{ 位置：相对位置； 宽度：900px； } mySlideShow先生{ 身高：494px； 背景：2000人； 溢出：隐藏； } 单页式img{ 宽度：49.3px； 边框：1px实心fff； 光标：指针； 保证金：2倍； } .画廊类别{ 位置：绝对位置； z指数：20000； 左：0； 排名前10%； 列表样式：无； 填充：0； } h1{ 颜色：FFF； 填充：0； 保证金：0； 字体大小：16px； 文本对齐：居中； } 李先生{ 背景：rgba0,0,0,0.5； 颜色：fff； 字体大小：粗体； 填充：4px； 保证金：2倍； 显示：内联块； 光标：指针； } 选择一个类别 体育 动物 自然的

---

从你的问题来看，不清楚你的技能水平在哪里，你的问题要么是技术问题，要么是概念问题。让我们试着涵盖这两个方面

您的分类系统可以实现如下：

首先，我们必须倾听点击事件并对此作出反应。 在使用jQuery时，以下操作将起作用：

$('.gallery-categories li').on('click', function(event) {
    var category = $(event.target).attr('id');
    console.debug(category + ' selected!');
});

从现在起，每次用户单击.gallery选择器下的li时，都会调用事件处理程序。请注意，此函数不检查是否设置了id

现在，我们要选择与您的类别匹配的所有元素：

// this happens in our event handler too
var $items = $('.mySlideShow a[data-id="' + category + '"]');

…迭代它们并更改某些内容：

$items.each(function() {
    $(this).addClass('selected');
});

我们现在是：

---

要更改与单击的li的id属性匹配的数据id属性吗？根据您的问题，您可能还想更改图像类别。是的，我确实想这样做。我的意思是，我的所有图像都有数据id，我的li有id，如果数据id与宽度id匹配，则显示匹配id或图像对不起，我的英语我编辑了您的问题以使其更清楚。你想做的是改变他们，改变他们。由于不清楚您想如何更改它们，我无法参考任何内容。谢谢您的帮助。我的英语不足以说明一些事情。例如，如果我单击“自然”，我的自然图像将被打开，将显示缩略图，或者如果我单击“体育运动图像”将使用缩略图打开，我不理解您的评论。我的意思是，仅给出此示例旋转木马的边框。我的问题不同。我有3个类别，当我单击“我的自然类别”时，我不想显示自然图像，或者如果我单击“动物”，则必须显示动物图像。是的，您可以将带边框的类更改为其他任何内容，这只是一个指示如何继续的示例。你的问题是改变，而不是展示。我不会为你写这方面的全部代码。谢谢你所做的一切，我是jquery新手，我的英语很差，非常感谢

$('.gallery-categories li').on('click', function(event) {
    var category = $(event.target).attr('id');
    var $items = $('.mySlideShow a[data-id="' + category + '"]');
    $items.each(function() {
        $(this).addClass('selected');
    });
});