英文:
Data-filter connection in jQuery with HTML code
问题
Here is the translated code you requested:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const pagiselector = document.querySelector(".portfolio__filter__pagi");
function test(totalPages, page) {
let pagicode = "";
let beforePage = page - 1;
let afterPage = page + 1;
let activeLi = "";
let totalP = totalPages;
if (page > 1) {
pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
<span class="arrow_left"></span> Prev</li></a>`;
}
if (page > 2) {
pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;
}
pagiselector.innerHTML = pagicode;
}
<!-- language: lang-html -->
<section class="portfolio spad">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="portfolio__filter">
<li class="active" data-filter=".pagi-1">
All
</li>
<li data-filter=".photo">
Photo
</li>
<li data-filter=".photo_1">
Photo_1
</li>
<li data-filter=".photo_2">
Photo_2
</li>
<li data-filter=".photo_3">
Photo_3
</li>
</ul>
</div>
</div>
<div class="row portfolio__gallery">
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_2
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_3
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- function pagination code
<ul class="portfolio__filter__pagi">
<li class="number__pagination" data-filter=".pagi-1">1</li>
<li class="number__pagination" data-filter=".pagi-2">2</li>
<li class="number__pagination" data-filter=".pagi-3">3</li>
<li class="number__pagination" data-filter=".pagi-6">6</li>
</ul>
-->
<!-- js pagination code -->
<ul class="portfolio__filter__pagi">
<!--
<a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
<span class="arrow_left"></span> Prev</li></a>
<a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
<a href="#" onclick="test(6,2)" class="number__pagination
<details>
<summary>英文:</summary>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const pagiselector = document.querySelector(".portfolio__filter__pagi");
function test(totalPages, page) {
let pagicode = "";
let beforePage = page - 1;
let afterPage = page + 1;
let activeLi = "";
let totalP = totalPages;
if (page > 1) {
pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
<span class="arrow_left"></span> Prev</li></a>`;
}
if (page > 2) {
pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;
}
pagiselector.innerHTML = pagicode;
}
<!-- language: lang-html -->
<section class="portfolio spad">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="portfolio__filter">
<li class="active" data-filter=".pagi-1">
All
</li>
<li data-filter=".photo">
Photo
</li>
<li data-filter=".photo_1">
Photo_1
</li>
<li data-filter=".photo_2">
Photo_2
</li>
<li data-filter=".photo_3">
Photo_3
</li>
</ul>
</div>
</div>
<div class="row portfolio__gallery">
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_2
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_3
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- function pagination code
<ul class="portfolio__filter__pagi">
<li class="number__pagination" data-filter=".pagi-1">1</li>
<li class="number__pagination" data-filter=".pagi-2">2</li>
<li class="number__pagination" data-filter=".pagi-3">3</li>
<li class="number__pagination" data-filter=".pagi-6">6</li>
</ul>
-->
<!-- js pagination code -->
<ul class="portfolio__filter__pagi">
<!--
<a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
<span class="arrow_left"></span> Prev</li></a>
<a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
<a href="#" onclick="test(6,2)" class="number__pagination active" data-filter=".pagi-2"><li>2</li></a>
-->
</ul>
<!-- end snippet -->
I asked the wrong question here, so I'll try to ask it differently. I would like to create a page navigation using javascript and Data-filter.
In the html code, the data-filter works perfectly, but when used in javascript, the Data-filter function only runs once when the TEST link is clicked. After another click, the function will no longer start.
So how should I modify the code (if possible) so that the Data-filter works outside of javascript? I would like to preserve the structure of the js code.
Text += <a href="#" class="number" data-filter=".text" onClick="test(1, 1)">Test</a>;
<div class="text">Text</div>
<div class="text1">Text</div>
<script>
function test(test1, test2) {
let Text = "";
Text += <a href="#" class="number" data-filter=".text" onClick="test(1, 1)">Test</a> ;
Text += <a href="#" class="number" data-filter=".text1" onClick="test(1, 1)">Test1</a>;
code.innerHTML = Text;
}
</details>
# 答案1
**得分**: 0
不要翻译代码部分，以下是翻译好的内容：
Instead of add `onclick="test(${totalP}, ${1})"` use [`addEventListener`][1] to bind the click event to your target element after you append your pagination. See the following example.
改用 [`addEventListener`][1] 来绑定点击事件到您的目标元素，而不是使用 `onclick="test(${totalP}, ${1})"`，在您附加分页后进行绑定。请参考以下示例。
<details>
<summary>英文:</summary>
Instead of add `onclick="test(${totalP}, ${1})"` use [`addEventListener`][1] to bind the click event to your target element after you append your pagination. See the following example.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const pagiselector = document.querySelector(".portfolio__filter__pagi");
function test(totalPages, page) {
let pagicode = "";
let beforePage = page - 1;
let afterPage = page + 1;
let activeLi = "";
let totalP = totalPages;
if (page > 1) {
pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
<span class="arrow_left"></span> Prev</li></a>`;
}
if (page > 2) {
pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;
}
}
let pagiHtml = "";
for (let i = 0; i < 6; i++) {
pagiHtml += `<a href="#" class="number__pagination filter" data-i="${i}" data-filter=".pagi-${i}"><li>${i}</li></a>`
}
pagiselector.innerHTML = pagiHtml;
let anchorsTags = pagiselector.getElementsByTagName("a");
for (var i = 0; i < anchorsTags.length; i++) {
anchorsTags[i].addEventListener("click", myFunction, false);
}
function myFunction(event) {
event.preventDefault();
console.log(this.getAttribute('data-i'));
// Your logic here
//test(totalPages, page)
}
<!-- language: lang-html -->
<section class="portfolio spad">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="portfolio__filter">
<li class="active" data-filter=".pagi-1">
All
</li>
<li data-filter=".photo">
Photo
</li>
<li data-filter=".photo_1">
Photo_1
</li>
<li data-filter=".photo_2">
Photo_2
</li>
<li data-filter=".photo_3">
Photo_3
</li>
</ul>
</div>
</div>
<div class="row portfolio__gallery">
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_1
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_2
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
<div class="portfolio__item">
<div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
<a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
</div>
<div class="portfolio__item__text">
<h4>
image
</h4>
<ul>
<li>
portfolio
</li>
<li>
Photo_3
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- function pagination code
<ul class="portfolio__filter__pagi">
<li class="number__pagination" data-filter=".pagi-1">1</li>
<li class="number__pagination" data-filter=".pagi-2">2</li>
<li class="number__pagination" data-filter=".pagi-3">3</li>
<li class="number__pagination" data-filter=".pagi-6">6</li>
</ul>
-->
<!-- js pagination code -->
<ul class="portfolio__filter__pagi">
<!--
<a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
<span class="arrow_left"></span> Prev</li></a>
<a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
<a href="#" onclick="test(6,2)" class="number__pagination active" data-filter=".pagi-2"><li>2</li></a>
-->
</ul>
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论