开发者问题收集

UIkit 3 的过滤器组件：使用 URL 哈希设置活动过滤器 - 无法使用 JS 更改活动过滤器

2018-07-09
3644
javascript filtering getuikit

我试图将哈希传递给 URL 以设置 UIkit 过滤器。 

<div uk-filter="target:.js-filter">
    <ul>
        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="filter:[data-color='blue'];"><a href="#"></a></li>
        <li uk-filter-control="filter:[data-color='white'];"><a href="#"></a></li>
    </ul>
    <ul class="js-filter">
        <li data-color="blue"></li>
        <li data-color="white"></li>
    </ul>
</div>

因此，例如，如果我转到 http://example.com/#white ，它只会显示白色项目（并且“白色”过滤器控件处于活动状态）。

我找不到任何关于如何使用 UIkit 3 实现这一点的清晰示例（ 这一个是关于 UIkit 2 ）。 对于我这样的新手来说，文档似乎不太清楚 ，因为不清楚 target 和 selActive 选项指的是什么。但是，我正在尝试以下内容： 

<script>
document.addEventListener("DOMContentLoaded", function(event){
    hash = document.location.hash;
    console.log("Hash: " + hash);

    if ( hash !== "" ) {
        var filter = document.querySelector('.js-filter');

        UIkit.filter( filter, {
            target: 'li [data-color:' + hash + ']',
            selActive: true,
        });
    }
});
</script>

但这会引发“未捕获的类型错误：无法读取 null 的属性‘children’”错误。

任何帮助都将不胜感激。:)

3个回答
<div uk-filter="target:.js-filter">
<ul id="filter-bar">
    <li class="uk-active" uk-filter-control><a href="#">All</a></li>
    <li uk-filter-control="filter:[data-color='blue'];"><a href="#"></a></li>
    <li uk-filter-control="filter:[data-color='white'];"><a href="#"></a></li>
</ul>
<ul class="js-filter">
    <li data-color="blue"></li>
    <li data-color="white"></li>
</ul>


      document.addEventListener("DOMContentLoaded", function(event){
        hash = document.location.hash;
        console.log("Hash: " + hash);

        if ( hash !== "" ) {
            var filter = document.querySelector('.js-filter');
            var filterBar= document.querySelector('#filter-bar');
            var activeFilter= document.querySelector('li [data-color:' + hash + ']');
            UIkit.filter( filterBar, {
                target: filter,
                selActive: activeFilter,
            });
        }
    });

我听说太晚了）但请尝试此代码。您需要先传递过滤器组件，而不是列表。

Gleb
2018-10-11

实现此目的的最简单方法是检查 URL 中的哈希值，然后找到过滤内容的 href 标签，然后只需以编程方式单击它即可。
复杂（且更合适）的方法是像在代码中一样触发更改，但由于默认过滤器应用于文档加载，因此您需要确保在 UIKit 过滤器之后调用脚本的过滤器。 

window.addEventListener("load", function(event) {
  //hash = document.location.hash;
  //console.log("Hash: " + hash);

  //Let's assume the document.location.hash returns #white
  hash = '#white';

  if (hash !== "") {
    //get the color subnav button
    color = document.querySelector('a[href="'+hash+'"]');
    //trigger the click event
    color.click();
  }
});
body {
  background-color: #eee;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit-icons.min.js"></script>


<div data-uk-filter=".js-filter">

  <ul class="uk-subnav uk-subnav-pill">
    <li uk-filter-control><a href="#">All</a></li>
    <li uk-filter-control="[data-color='white']"><a href="#white">White</a></li>
    <li uk-filter-control="[data-color='blue']"><a href="#blue">Blue</a></li>
    <li uk-filter-control="[data-color='black']"><a href="#black">Black</a></li>
  </ul>

  <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
    <li data-color="white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li data-color="blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li data-color="white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li data-color="white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li data-color="black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li data-color="black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li data-color="blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li data-color="black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li data-color="blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li data-color="white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li data-color="blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li data-color="black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
  </ul>

</div>
moped
2018-07-10

我使用以下代码从 URL 读取哈希并触发活动的 UIKit 过滤器，并且如果用户单击其他过滤器按钮，还会将更改反映到 URL： 

document.addEventListener("DOMContentLoaded", function(event) {
    var hash = document.location.hash.substr(1);  // Remove the leading "#" from hash
    console.log("Hash: " + hash);

    if (hash !== "") {
        var filter = document.querySelector('.js-filter');
        var filterBar = document.querySelector('.el-nav');

        var activeFilter = Array.from(document.querySelectorAll('[uk-filter-control]')).find(function(el) {
            var rawAttr = el.getAttribute('uk-filter-control');
            if (rawAttr === "") return false;

            try {
                var parsedAttr = JSON.parse(rawAttr);
                
                return parsedAttr.filter && parsedAttr.filter.toLowerCase().includes(`[data-tag~="${hash.toLowerCase()}"]`);
            } catch (e) {
                console.error("JSON parse failed:", e);
                return false;
            }
        });

        if (activeFilter) {
            UIkit.filter(filterBar, {
                target: filter,
                selActive: activeFilter
            });
        }
    }
    
    Array.from(document.querySelectorAll('[uk-filter-control]')).forEach(function(el) {
        el.addEventListener('click', function() {
            var rawAttr = el.getAttribute('uk-filter-control');

            if (rawAttr === "") {
                window.location.hash = "";
                return;
            }
            
            try {
                var parsedAttr = JSON.parse(rawAttr);
                
                if (parsedAttr.filter) {
                    var match = parsedAttr.filter.match(/\[data-tag~="([^"]+)"\]/);
                    
                    if (match && match[1]) {
                        window.location.hash = match[1];
                    }
                }
            } catch (e) {
                console.error("JSON parse failed:", e);
            }
        });
    });
});
Đức Thanh Nguyễn
2023-09-18