Question

我的网站上有一堆复选框，每个复选框都有唯一的ID。我想使用jquery显示具有与这些id匹配的标签的html对象。因此，如果用户单击“和平”，它将显示所有带有“和平”作为标记的html对象。（我已经在html中手动添加了标签）希望这是有道理的。这是复选框的html代码：

<div class="col-md-6 center checks" id="mood">
 <input type="checkbox" id="contemplative" > <span class="check">Contemplative</span>
 <input type="checkbox" id="peaceful">  <span class="check">Peaceful</span>
 <input type="checkbox"  id="aggresive"> <span class="check">Aggressive</span>
 <input type="checkbox"  id="heartbreak">  <span class="check">Heartbreak</span><br>
 <input type="checkbox" id="dark">  <span class="check">Dark</span> 
 <input type="checkbox"  id="epic">  <span class="check">Epic</span>
 <input type="checkbox" id="cheerful">  <span class="check">Cheerful</span>
 <input type="checkbox"  id="fun">  <span class="check">Fun</span><br>
 <input type="checkbox" id="atmospheric"> <span class="check">Atmospheric</span>
 <input type="checkbox"  id="upbeat">  <span class="check">Upbeat</span>
 <input type="checkbox" id="heartful">  <span class="check">Heartfelt</span> 
 <input type="checkbox" id="sad">  <span class="check">Sad</span> <br>
</div>

很抱歉，没有提供足够的信息！使用以下脚本创建对象：

for (var i = 0; i < urls.length; i++) {
    console.log('index', i)
    el = '';
    var url = urls[i]
    console.log('item', url)
    // if (!url) continue
    el += '<li style="display: none;" data-tags="' + url.tags + '">'
    el += '<iframe width="550" height="100" scrolling="no" frameborder="no" src="' + url.src + '"></iframe>'
    el += '</li>'
    content += el
}

标签和src是从此数组中提取的：（还有更多项目，但我为此做了缩短）

var urls = [

 {
    tags: 'tv, film, score, instrumental, dark, mysterious, quirky, jon licht, Jon Licht, licht, Licht',
    src: "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/365566355&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
 },
 {
    tags: 'tv, film, score, instrumental, dark, mysterious, quirky, jon licht, Jon Licht, licht, Licht',
    src: "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/365565899&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
 },

]

现在我有一个执行类似功能的搜索功能。我也希望添加复选框。这是搜索功能的代码：

var $input = $('#myInput');
$input.on('keyup', search)
function myFunction(e) {
    // Declare variables
    var $q, $el, tags, match, tags;


    $q = e.target.value
    var $list = $container.children('li')
    if ($q.length < 2) {
        $list.hide();
        return;
    }

    console.log('list', $list)
    queryTags = $q.split(',').map(tag => tag.trim())
    console.log('tags', tags)
    $list.each(function(index, el) {            
        $el = $(el)
        tags = $el.attr('data-tags')

        for (var j = 0; j < queryTags.length; j++) {    
            match = tags.match(queryTags[j])            
             if (queryTags.every(queryTag => tags.includes(queryTag))) 
             $el.show();
             else $el.hide();



        }
    })


    //do something
}

我希望这可以解决所有问题。

Answer 1

如果有帮助，请尝试下面的代码

$(document).ready(function () {
        $('input[type="checkbox"]').click(function () {               
            var clickedBoxId = $(this).attr('id');
            $('['+clickedBoxId+']').each(function () {
                $(this).show();
                // Rest code you can do here

            });               
        });
    });

使用复选框显示带有某些标签的对象（jQuery）

1 个答案: