javascript - 使用多个标签过滤内容，但一次只允许用户选择一个标签

标签 javascript html css

我正在为学术网站构建一个页面，旨在按标签对论文进行排序。每篇论文都应该能够标记多个主题(例如，ad hoc 和 metaphor)，但用户应该只能选择一个标签。

目前是这样的:http://www.casasanto.com/homeRevamp/index.html .就像现在一样，用户可以选择多个标签来缩小搜索范围。我们想简化它，以便在单击 ad hoc 后单击 metaphor 将向您显示每篇带有 metaphor 标签的论文，而不是所有带有 ad hoc 和 metaphor 标签的论文。

HTML 和 CSS:

<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Tagsort Demo</title>

    <style>

    html,body {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .item {
        box-sizing: border-box;
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 0px;
        padding-right: 0px;
        width: 80%;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .item .wrapper {
        background-color: white;
        padding: 8px;
    }

    .item .wrapper .item-tags {
        color: gray;
        font-size: 12px;
        line-height: 1.8;
    }

    .tagsort-tags-container {
        margin: 40px 0;
    }

    .tagsort-tags-container span {
        display: inline-block;
        border: 2px solid #CCC;
        color: gray;
        font-size: .9em;
        line-height: 10px;
        padding: 5px 9px;
        margin: 5px;
        cursor: pointer;
        border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        -webkit-border-radius: 2px 2px 2px 2px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .tagsort-tags-container span:hover {
        border: 2px solid #000;
        color: #FFF;
        background-color: #000;

    }
    .tagsort-tags-container span.tagsort-active {
        border: 2px solid #000;
        color: #000;
        background-color: transparent;
    }

</style>

    <link href="tagsort.css" rel="stylesheet" type="text/css"></link>
    <link rel="stylesheet" href="filterTagsortStylesheet.css" type="text/css">
    <script src="jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="tagsort.js" type="text/javascript" charset="utf-8"></script>

    <script>
    $(function(){
        // Inclusive = when multiple tags are selected, all elements that contain ANY of those tags will be shown
        // Exclusive = when multiple tags are selected, only elements that contain ALL of those tags will be shown. To make exclusive, set "inclusive: false" to "true"
        $('div.tags-container').tagSort({selector:'.item',displaySelector: '.item-tags', displaySeperator: ' / ', inclusive: false, fadeTime:200});
    });
    </script>

</head>



<body>

    <div class="container">

        <h1>Selected Papers</h1>

        <h3>Click on a topic to see all papers tagged under that heading.</h3>

        <div class="tags-container row"></div>

        <div class="item col-md-3" data-item-id="1" data-item-tags="Ad Hoc Congition">
            <div class="wrapper">
                Casasanto, D. (in press). Temporal language and temporal thinking may not go hand in hand. In B. Lewandowska-Tomaszczyk (Ed.), <i>Conceptualizations of time</i>. Amsterdam: John Benjamins.
                <p class="item-tags"></p>
            </div>
        </div>

        <div class="item col-md-3" data-item-id="2" data-item-tags="Ad Hoc Congition, Bodily Relativity">
            <div class="wrapper">
                Casasanto, D., &amp; Lupyan, G. (2015). All concepts are ad hoc concepts. In E. Margolis &amp; S. Laurence (Eds.), <i>The conceptual mind: New directions in the study of concepts</i> (pp. 543-566). Cambridge: MIT Press.
                <p class="item-tags"></p>
            </div>
        </div>

        <div class="item col-md-3" data-item-id="3" data-item-tags="Metaphor">
            <div class="wrapper">
                R.</a>, Crepaldi, D., Casasanto, D., Crollen, V. &amp; Collignon, O. (2015). Space and time in the sighted and blind. <i>Cognition, 141</i>, 67-72.
                <p class="item-tags"></p>
            </div>
        </div>

        <div class="item col-md-3" data-item-id="4" data-item-tags="Bodily Relativity, Space &amp; Time">
            <div class="wrapper">
                Casasanto, D., &amp; <a href="http://www.casasanto.com/tomgijssels/">Gijssels, T.</a> (2015). What makes a metaphor an embodied metaphor? <i>Linguistics Vanguard.</i> doi:10.1515/lingvan-2014-1015
                <p class="item-tags"></p>
            </div>
        </div>

    </div>

</body>

</html>

JavaScript:

;(function($) {
  $.fn.tagSort = function(options) {
      var defaults = {
        selector: '.item-tagsort',
        displaySelector: false,
        displaySeperator: ' ',
        inclusive: false, 
        fadeTime: 200
      };
      options = $.extend(defaults, options);

      var tagSortEngine = {
        generateTags: function(elements) {
          var tags_inclusive = {};
          var tags_exclusive = {elements: [], tags: []};
          elements.each(function(i){
            $element = $(this)
            ;
            var tagsData = $element.data('item-tags'),
            elementTags = tagsData.match(/,\s+/) ? tagsData.split(', ') : tagsData.split(',');

            $.each(elementTags, function(i, v){
              var tagName = v.toLowerCase();
              if(!tags_inclusive[tagName]){
                tags_inclusive[tagName] = [];
                tagSortEngine.container.append('<span>'+v+'</span>');

              }
              if(options.displaySelector !== false){
                $element.find(options.displaySelector).append(i > 0 ? options.displaySeperator + v : v);
              }
              tags_inclusive[tagName].push($element);
            });

            tags_exclusive.elements.push($element);
            tags_exclusive.tags.push(elementTags);
          });
          return options.inclusive == true ? tags_inclusive:tags_exclusive;
        },
        exclusiveSort: function(tags, elements){
          var display = [[],[]];
          $.each(tags.elements, function(element_key, element){
            var showElement = true;
            tagSortEngine.container.find('.tagsort-active').each(function(i){
              if(tags.tags[element_key].indexOf($(this).text()) == -1){
                showElement = false;
                display[0].push(element);
              }
            });

            if(showElement == true) {
              display[1].push(element);
            }
          });
          return display;
        },
        inclusiveSort: function(tags, elements){
          var display = [[],[]]
          $container.find('.tagsort-active').each(function(i){
            $.each(tags[$(this).text().toLowerCase()],function(element_key, element){
              display[1].push(element);

            });
          });
          return display;
        },

        inititalize: function(tagsContainer){
          tagSortEngine.container = tagsContainer;
          tagSortEngine.container.addClass('tagsort-tags-container');
          var elements = $(options.selector);
          tagSortEngine.tags = tagSortEngine.generateTags(elements, tagSortEngine.container);
          var tagElement = tagSortEngine.container.find('span');
          tagElement.click(function(){
            $(this).toggleClass('tagsort-active');
            if(!tagElement.hasClass('tagsort-active')){
              elements.fadeIn(options.fadeTime);
            }
            else {
              elements.fadeOut(options.fadeTime);
              var display = options.inclusive == true ? tagSortEngine.inclusiveSort(tagSortEngine.tags, elements):tagSortEngine.exclusiveSort(tagSortEngine.tags, elements);
              if(display[0].length > 0){
                $.each(display[0], function(hide_key, toHide){
                  if(toHide.is(':visible')){
                    toHide.fadeOut(options.fadeTime);
                  }
                });
              }
              if(display[1].length > 0){
                $.each(display[1], function(hide_key, toShow){
                  if(!toShow.is('visible')){
                    toShow.fadeIn(options.fadeTime);
                  }
                });
              }
            }
          });
        }
      }
      tagSortEngine.inititalize(this);
      return $(this);
    }
})(jQuery);

最佳答案

Javascript 下面。解决方案是在 tagElement.click 中，您需要从所有元素中删除 "tagsort-active" 类，然后将其切换到所需的元素。

;(function($) {
  $.fn.tagSort = function(options) {
      var defaults = {
        selector: '.item-tagsort',
        displaySelector: false,
        displaySeperator: ' ',
        inclusive: false, 
        fadeTime: 200
      };
      options = $.extend(defaults, options);

      var tagSortEngine = {
        generateTags: function(elements) {
          var tags_inclusive = {};
          var tags_exclusive = {elements: [], tags: []};
          elements.each(function(i){
            $element = $(this)
            ;
            var tagsData = $element.data('item-tags'),
            elementTags = tagsData.match(/,\s+/) ? tagsData.split(', ') : tagsData.split(',');

            $.each(elementTags, function(i, v){
              var tagName = v.toLowerCase();
              if(!tags_inclusive[tagName]){
                tags_inclusive[tagName] = [];
                tagSortEngine.container.append('<span>'+v+'</span>');

              }
              if(options.displaySelector !== false){
                $element.find(options.displaySelector).append(i > 0 ? options.displaySeperator + v : v);
              }
              tags_inclusive[tagName].push($element);
            });

            tags_exclusive.elements.push($element);
            tags_exclusive.tags.push(elementTags);
          });
          return options.inclusive == true ? tags_inclusive:tags_exclusive;
        },
        exclusiveSort: function(tags, elements){
          var display = [[],[]];
          $.each(tags.elements, function(element_key, element){
            var showElement = true;
            tagSortEngine.container.find('.tagsort-active').each(function(i){
              if(tags.tags[element_key].indexOf($(this).text()) == -1){
                showElement = false;
                display[0].push(element);
              }
            });

            if(showElement == true) {
              display[1].push(element);
            }
          });
          return display;
        },
        inclusiveSort: function(tags, elements){
          var display = [[],[]]
          $container.find('.tagsort-active').each(function(i){
            $.each(tags[$(this).text().toLowerCase()],function(element_key, element){
              display[1].push(element);

            });
          });
          return display;
        },

        inititalize: function(tagsContainer){
          tagSortEngine.container = tagsContainer;
          tagSortEngine.container.addClass('tagsort-tags-container');
          var elements = $(options.selector);
          tagSortEngine.tags = tagSortEngine.generateTags(elements, tagSortEngine.container);
          var tagElement = tagSortEngine.container.find('span');
          tagElement.click(function(){
            $.each(tagElement, function(i,v){
              v.removeAttribute("class");
            });
            $(this).toggleClass('tagsort-active');
            if(!tagElement.hasClass('tagsort-active')){
              elements.fadeIn(options.fadeTime);
            }
            else {
              elements.fadeOut(options.fadeTime);
              var display = options.inclusive == true ? tagSortEngine.inclusiveSort(tagSortEngine.tags, elements):tagSortEngine.exclusiveSort(tagSortEngine.tags, elements);
              if(display[0].length > 0){
                $.each(display[0], function(hide_key, toHide){
                  if(toHide.is(':visible')){
                    toHide.fadeOut(options.fadeTime);
                  }
                });
              }
              if(display[1].length > 0){
                $.each(display[1], function(hide_key, toShow){
                  if(!toShow.is('visible')){
                    toShow.fadeIn(options.fadeTime);
                  }
                });
              }
            }
          });
        }
      }
      tagSortEngine.inititalize(this);
      return $(this);
    }
})(jQuery);

关于javascript - 使用多个标签过滤内容，但一次只允许用户选择一个标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33532088/

上一篇：html - CSS 表格布局 : fixed to all columns except the first

下一篇：html - 如何在 Bootstrap 中按下时更改按钮颜色？

相关文章：

javascript - 创建关于按钮单击的函数，通过循环创建按钮

javascript - 在 ASP.NET 中按下 Enter 时触发 OnClientClick

javascript - 带有 html 内容的工具提示出现在右侧，有工作代码，但它仅适用于 1 个提示，我希望它是动态的

html - 将文本与对齐选项卡的底部对齐 (Bootstrap 3.3.6)

html - nth-child 不适用于前两个子元素

javascript - 在观察器中去抖函数执行(AngularJS)

javascript - 在 javascript 中对字符串使用除法运算符 (/)

javascript - 带有 css 和 html 的跟踪栏不会显示在我的页面上

javascript - 根据先前的输入选项选择(单选按钮)显示 div 的内容。在一个文件中工作，而不是在其他文件中工作

html - Flexbox 等高列

©2024 IT工具网  联系我们