Question

有点坚持这个并寻求一些建议。

我有一个特殊的scirpt，当我在菜单中选择文本时添加了类itemSelect然后如果再次选择它会删除该类...这一切都正常。还有一个ALL选项可以从所有其他菜单项中删除该类。

这一切都很好（感谢@ Keith.Abramo）。

我坚持的位是当选择一个项目时我需要隐藏和/或在不同的列表中显示图像....这些图像是根据data-tags属性中的标签选择的。

所以如果我取消选择第1项：<li class=""><a href="#" rel="fe">ITEM 1</a></li>

具有rel fe fe属性中data-tags的所有图片将隐藏，除非粗略的其他数据标记仍然被选中（使用类{{ 1}}在菜单列表中。）

我希望这样做：-S

到目前为止，我所拥有的一切都在这里：http://jsfiddle.net/CmSjZ/

我自己尝试了这一点，但只是搞砸了，不知道如何管理多个标签。

对此的任何帮助将不胜感激。

C

Answer 1

嘿刚刚更新了你的代码，让它按你想要的方式工作，这里是JsFiddle：http://jsfiddle.net/CmSjZ/6/

我添加了这些内容：

if ($(e).attr("class") == 'itemSelect')
            tags += $(e).find('a').attr("rel") + ' ';

和：

$('.my-images ul.images li img').hide();    
    if (tags.indexOf('All') != -1){
        $('.my-images ul.images li img').show();
    }
    else if (tags != ''){
        tags = tags.substr(0,tags.length - 1);
        var arr = tags.split(' ');
        var len = arr.length;
        for (var i = 0;i < len; i++){
            $('.my-images ul.images li[data-tags*="' + arr[i] +'"] img').show();
        }
    }

我正在存储第一次选择的标签的值。在我解析我的tags变量之后，知道我们需要显示哪些图像而不破坏你的html架构;）

希望它有所帮助;）

Answer 2

首先，将click事件绑定到所有li。然后得到每个李的相关性。根据rel获取img显示。显示它。

$('li').click(function(){
// Do your item select stuff here
tag = $(this).attr('rel');

$('img[data-tags="'+tag+'"]').show();
});

Answer 3

示例 - http://jsfiddle.net/CmSjZ/9/

这应该按照数据标签显示和隐藏图像 -

$('.images li').hide();
$('.my-menu ul.menu li.itemSelect').each(function () {
    var rell = $(this).find('a').attr('rel');
    $('.images li').filter(function (index) {
         return $.inArray(rell,$(this).attr('data-tags').split(' ')) != -1
    }).show();
});

jquery隐藏或显示图像组

3 个答案: