Mixitup Javascript 在 Internet Explorer 中不起作用
Mixitup Javascript doesn't work in Internet Explorer
以下关于 Mixitup.js 的代码在 Internet Explorer 中不起作用,但在所有其他浏览器中都可以正常工作。
任何人都可以帮助解决这个问题或者可以调整代码以在 Internet Explorer 中工作吗?
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>
<script>
// 2) Reusable function to convert any string/text to css-friendly format
var conv = function (str) {
if (!str) {
str = 'empty';
} return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\]\^`\{\|\}~]/g, '')
.replace(/ /g, "-")
.toLowerCase()
.trim();
};
// 3) Creating dynamic elements classes from its categories for filtering:
var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
elem.parentElement.parentElement.parentElement.parentElement.classList.add(className);
});
// 4) Creating custom data-date attributes from blog dates:
var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
sortArray.forEach( function(sortElem) {
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
});
// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
var containerEl = document.querySelector('.collection-list');
// 6) Call the MixitUp plugin
mixitup(containerEl);
</script>
我 运行 你在 IE 中的代码显示错误 Object doesn't support property or method 'forEach'
。 ForEach
是为 NodeList 而不是 HTMLCollection 定义的。我们可以为 HTMLCollection 填充 forEach
然后它可以用于 IE 中的 NodeList 和 HTMLCollection。
填充:
var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
var ctor = ctors[n];
if (ctor && ctor.prototype && !ctor.prototype.forEach) {
// (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
ctor.prototype.forEach = Array.prototype.forEach;
if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
Object.defineProperty(ctor.prototype, Symbol.iterator, {
value: Array.prototype[Symbol.itereator],
writable: true,
configurable: true
});
}
}
}
以下关于 Mixitup.js 的代码在 Internet Explorer 中不起作用,但在所有其他浏览器中都可以正常工作。
任何人都可以帮助解决这个问题或者可以调整代码以在 Internet Explorer 中工作吗?
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>
<script>
// 2) Reusable function to convert any string/text to css-friendly format
var conv = function (str) {
if (!str) {
str = 'empty';
} return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\]\^`\{\|\}~]/g, '')
.replace(/ /g, "-")
.toLowerCase()
.trim();
};
// 3) Creating dynamic elements classes from its categories for filtering:
var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
elem.parentElement.parentElement.parentElement.parentElement.classList.add(className);
});
// 4) Creating custom data-date attributes from blog dates:
var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
sortArray.forEach( function(sortElem) {
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
});
// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
var containerEl = document.querySelector('.collection-list');
// 6) Call the MixitUp plugin
mixitup(containerEl);
</script>
我 运行 你在 IE 中的代码显示错误 Object doesn't support property or method 'forEach'
。 ForEach
是为 NodeList 而不是 HTMLCollection 定义的。我们可以为 HTMLCollection 填充 forEach
然后它可以用于 IE 中的 NodeList 和 HTMLCollection。
填充:
var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
var ctor = ctors[n];
if (ctor && ctor.prototype && !ctor.prototype.forEach) {
// (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
ctor.prototype.forEach = Array.prototype.forEach;
if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
Object.defineProperty(ctor.prototype, Symbol.iterator, {
value: Array.prototype[Symbol.itereator],
writable: true,
configurable: true
});
}
}
}