Data-filter连接在jQuery中的HTML代码

huangapple
go评论158阅读模式
英文:

Data-filter connection in jQuery with HTML code

问题

Here is the translated code you requested:

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. const pagiselector = document.querySelector(".portfolio__filter__pagi");
  6. function test(totalPages, page) {
  7.   let pagicode = "";
  8.   let beforePage = page - 1;
  9.   let afterPage = page + 1;
  10.   let activeLi = "";
  11.   let totalP = totalPages;
  13.   if (page > 1) {
  14.     pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
  15.                 <span class="arrow_left"></span> Prev</li></a>`;
  16.   }
  17.   if (page > 2) {
  18.     pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;
  19.   }
  20.   pagiselector.innerHTML = pagicode;
  21. }
  23. <!-- language: lang-html -->
  24. <section class="portfolio spad">
  25.   <div class="container">
  26.     <div class="row">
  27.       <div class="col-lg-12">
  28.         <ul class="portfolio__filter">
  29.           <li class="active" data-filter=".pagi-1">
  30.             All
  31.           </li>
  32.           <li data-filter=".photo">
  33.             Photo
  34.           </li>
  35.           <li data-filter=".photo_1">
  36.             Photo_1
  37.           </li>
  38.           <li data-filter=".photo_2">
  39.             Photo_2
  40.           </li>
  41.           <li data-filter=".photo_3">
  42.             Photo_3
  43.           </li>
  44.         </ul>
  45.       </div>
  46.     </div>
  47.     <div class="row portfolio__gallery">
  48.       <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
  49.         <div class="portfolio__item">
  50.           <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
  51.             <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>
  52.           </div>
  53.           <div class="portfolio__item__text">
  54.             <h4>
  55.               image
  56.             </h4>
  57.             <ul>
  58.               <li>
  59.                 portfolio
  60.               </li>
  61.               <li>
  62.                 Photo
  63.               </li>
  64.             </ul>
  65.           </div>
  66.         </div>
  67.       </div>
  68.       <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
  69.         <div class="portfolio__item">
  70.           <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
  71.             <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>
  72.           </div>
  73.           <div class="portfolio__item__text">
  74.             <h4>
  75.               image
  76.             </h4>
  77.             <ul>
  78.               <li>
  79.                 portfolio
  80.               </li>
  81.               <li>
  82.                 Photo_1
  83.               </li>
  84.             </ul>
  85.           </div>
  86.         </div>
  87.       </div>
  88.       <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
  89.         <div class="portfolio__item">
  90.           <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
  91.             <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>
  92.           </div>
  93.           <div class="portfolio__item__text">
  94.             <h4>
  95.               image
  96.             </h4>
  97.             <ul>
  98.               <li>
  99.                 portfolio
  100.               </li>
  101.               <li>
  102.                 Photo_1
  103.               </li>
  104.             </ul>
  105.           </div>
  106.         </div>
  107.       </div>
  108.       <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
  109.         <div class="portfolio__item">
  110.           <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
  111.             <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>
  112.           </div>
  113.           <div class="portfolio__item__text">
  114.             <h4>
  115.               image
  116.             </h4>
  117.             <ul>
  118.               <li>
  119.                 portfolio
  120.               </li>
  121.               <li>
  122.                 Photo_2
  123.               </li>
  124.             </ul>
  125.           </div>
  126.         </div>
  127.       </div>
  128.       <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
  129.         <div class="portfolio__item">
  130.           <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
  131.             <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>
  132.           </div>
  133.           <div class="portfolio__item__text">
  134.             <h4>
  135.               image
  136.             </h4>
  137.             <ul>
  138.               <li>
  139.                 portfolio
  140.               </li>
  141.               <li>
  142.                 Photo_3
  143.               </li>
  144.             </ul>
  145.           </div>
  146.         </div>
  147.       </div>
  148.     </div>
  149.     <!-- function pagination code 
  150.     <ul class="portfolio__filter__pagi">
  151.       <li class="number__pagination" data-filter=".pagi-1">1</li>
  152.       <li class="number__pagination" data-filter=".pagi-2">2</li>
  153.       <li class="number__pagination" data-filter=".pagi-3">3</li>
  154.       <li class="number__pagination" data-filter=".pagi-6">6</li>
  155.     </ul>
  156.     -->
  157.     <!-- js pagination code -->
  158.     <ul class="portfolio__filter__pagi">
  159.       <!-- 
  160.       <a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
  161.         <span class="arrow_left"></span> Prev</li></a>
  162.       <a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
  163.       <a href="#" onclick="test(6,2)" class="number__pagination
  165. <details>
  166. <summary>英文:</summary>
  170. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  172. &lt;!-- language: lang-js --&gt;
  174.     const pagiselector = document.querySelector(&quot;.portfolio__filter__pagi&quot;);
  176.     function test(totalPages, page) {
  177.       let pagicode = &quot;&quot;;
  178.       let beforePage = page - 1;
  179.       let afterPage = page + 1;
  180.       let activeLi = &quot;&quot;;
  181.       let totalP = totalPages;
  184.       if (page &gt; 1) {
  185.         pagicode += `&lt;a href=&quot;#&quot; onclick=&quot;test(${totalP}, ${page - 1})&quot; class=&quot;arrow__pagination left__arrow&quot; data-filter=&quot;.pagi-${page - 1}&quot;&gt;&lt;li&gt;
  186.                     &lt;span class=&quot;arrow_left&quot;&gt;&lt;/span&gt; Prev&lt;/li&gt;&lt;/a&gt;`;
  187.                         
  188.       }
  189.       if (page &gt; 2) {
  190.         pagicode += `&lt;a href=&quot;#&quot; onclick=&quot;test(${totalP}, ${1})&quot; class=&quot;number__pagination filter&quot; data-filter=&quot;.pagi-${1}&quot;&gt;&lt;li&gt;1&lt;/li&gt;&lt;/a&gt;`;
  192.     }
  193.       pagiselector.innerHTML = pagicode;
  195.     }
  197. &lt;!-- language: lang-html --&gt;
  199.     &lt;section class=&quot;portfolio spad&quot;&gt;
  200.     	&lt;div class=&quot;container&quot;&gt;
  201.     		&lt;div class=&quot;row&quot;&gt;
  202.     			&lt;div class=&quot;col-lg-12&quot;&gt;
  203.     				&lt;ul class=&quot;portfolio__filter&quot;&gt;
  204.     					&lt;li class=&quot;active&quot; data-filter=&quot;.pagi-1&quot;&gt;
  205.     						All
  206.     					&lt;/li&gt;
  207.     					&lt;li data-filter=&quot;.photo&quot;&gt;
  208.     						Photo
  209.     					&lt;/li&gt;
  210.     					&lt;li data-filter=&quot;.photo_1&quot;&gt;
  211.     						Photo_1
  212.     					&lt;/li&gt;
  213.     					&lt;li data-filter=&quot;.photo_2&quot;&gt;
  214.     						Photo_2
  215.     					&lt;/li&gt;
  216.     					&lt;li data-filter=&quot;.photo_3&quot;&gt;
  217.     						Photo_3
  218.     					&lt;/li&gt;
  219.     				&lt;/ul&gt;
  220.     			&lt;/div&gt;
  221.     		&lt;/div&gt;
  222.     		&lt;div class=&quot;row portfolio__gallery&quot;&gt;
  223.     			&lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo&quot;&gt;
  224.     				&lt;div class=&quot;portfolio__item&quot;&gt;
  225.     					&lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  226.     						&lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  227.     					&lt;/div&gt;
  228.     					&lt;div class=&quot;portfolio__item__text&quot;&gt;
  229.     						&lt;h4&gt;
  230.     							image
  231.     						&lt;/h4&gt;
  232.     						&lt;ul&gt;
  233.     							&lt;li&gt;
  234.     								portfolio
  235.     							&lt;/li&gt;
  236.     							&lt;li&gt;
  237.     								Photo
  238.     							&lt;/li&gt;
  239.     						&lt;/ul&gt;
  240.     					&lt;/div&gt;
  241.     				&lt;/div&gt;
  242.     			&lt;/div&gt;
  243.     			&lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1&quot;&gt;
  244.     				&lt;div class=&quot;portfolio__item&quot;&gt;
  245.     					&lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  246.     						&lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  247.     					&lt;/div&gt;
  248.     					&lt;div class=&quot;portfolio__item__text&quot;&gt;
  249.     						&lt;h4&gt;
  250.     							image
  251.     						&lt;/h4&gt;
  252.     						&lt;ul&gt;
  253.     							&lt;li&gt;
  254.     								portfolio
  255.     							&lt;/li&gt;
  256.     							&lt;li&gt;
  257.     								Photo_1
  258.     							&lt;/li&gt;
  259.     						&lt;/ul&gt;
  260.     					&lt;/div&gt;
  261.     				&lt;/div&gt;
  262.     			&lt;/div&gt;
  263.     			&lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1&quot;&gt;
  264.     				&lt;div class=&quot;portfolio__item&quot;&gt;
  265.     					&lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  266.     						&lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  267.     					&lt;/div&gt;
  268.     					&lt;div class=&quot;portfolio__item__text&quot;&gt;
  269.     						&lt;h4&gt;
  270.     							image
  271.     						&lt;/h4&gt;
  272.     						&lt;ul&gt;
  273.     							&lt;li&gt;
  274.     								portfolio
  275.     							&lt;/li&gt;
  276.     							&lt;li&gt;
  277.     								Photo_1
  278.     							&lt;/li&gt;
  279.     						&lt;/ul&gt;
  280.     					&lt;/div&gt;
  281.     				&lt;/div&gt;
  282.     			&lt;/div&gt;
  283.     			&lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2&quot;&gt;
  284.     				&lt;div class=&quot;portfolio__item&quot;&gt;
  285.     					&lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  286.     						&lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  287.     					&lt;/div&gt;
  288.     					&lt;div class=&quot;portfolio__item__text&quot;&gt;
  289.     						&lt;h4&gt;
  290.     							image
  291.     						&lt;/h4&gt;
  292.     						&lt;ul&gt;
  293.     							&lt;li&gt;
  294.     								portfolio
  295.     							&lt;/li&gt;
  296.     							&lt;li&gt;
  297.     								Photo_2
  298.     							&lt;/li&gt;
  299.     						&lt;/ul&gt;
  300.     					&lt;/div&gt;
  301.     				&lt;/div&gt;
  302.     			&lt;/div&gt;
  303.     			&lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3&quot;&gt;
  304.     				&lt;div class=&quot;portfolio__item&quot;&gt;
  305.     					&lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  306.     						&lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  307.     					&lt;/div&gt;
  308.     					&lt;div class=&quot;portfolio__item__text&quot;&gt;
  309.     						&lt;h4&gt;
  310.     							image
  311.     						&lt;/h4&gt;
  312.     						&lt;ul&gt;
  313.     							&lt;li&gt;
  314.     								portfolio
  315.     							&lt;/li&gt;
  316.     							&lt;li&gt;
  317.     								Photo_3
  318.     							&lt;/li&gt;
  319.     						&lt;/ul&gt;
  320.     					&lt;/div&gt;
  321.     				&lt;/div&gt;
  322.     			&lt;/div&gt;
  323.     		&lt;/div&gt;
  324.     		&lt;!-- function pagination code 
  325.         &lt;ul class=&quot;portfolio__filter__pagi&quot;&gt;
  326.     		&lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-1&quot;&gt;1&lt;/li&gt;
  327.     		&lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-2&quot;&gt;2&lt;/li&gt;
  328.     		&lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-3&quot;&gt;3&lt;/li&gt;
  329.     		&lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-6&quot;&gt;6&lt;/li&gt;
  330.     		&lt;/ul&gt;
  331.     		--&gt;
  332.     		&lt;!-- js pagination code --&gt;
  333.     		&lt;ul class=&quot;portfolio__filter__pagi&quot;&gt;
  334.     			&lt;!-- 
  335.           &lt;a href=&quot;#&quot; onclick=&quot;test(6,1)&quot; class=&quot;arrow__pagination left__arrow&quot; data-filter=&quot;.pagi-1&quot;&gt;&lt;li&gt;
  336.     			&lt;span class=&quot;arrow_left&quot;&gt;&lt;/span&gt; Prev&lt;/li&gt;&lt;/a&gt;
  337.     			&lt;a href=&quot;#&quot; onclick=&quot;test(6,1)&quot; class=&quot;number__pagination&quot; data-filter=&quot;.pagi-1&quot;&gt;&lt;li&gt;2&lt;/li&gt;&lt;/a&gt;
  338.     			&lt;a href=&quot;#&quot; onclick=&quot;test(6,2)&quot; class=&quot;number__pagination active&quot; data-filter=&quot;.pagi-2&quot;&gt;&lt;li&gt;2&lt;/li&gt;&lt;/a&gt;
  339.     			--&gt;
  340.     		&lt;/ul&gt;
  342. &lt;!-- end snippet --&gt;
  344. I asked the wrong question here, so I&#39;ll try to ask it differently. I would like to create a page navigation using javascript and Data-filter.
  345. 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.
  346. 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 += &lt;a href=&quot;#&quot; class=&quot;number&quot; data-filter=&quot;.text&quot; onClick=&quot;test(1, 1)&quot;&gt;Test&lt;/a&gt;;

  1. &lt;div class=&quot;text&quot;&gt;Text&lt;/div&gt;
  2. &lt;div class=&quot;text1&quot;&gt;Text&lt;/div&gt;

<script>
function test(test1, test2) {
let Text = "";
Text += &lt;a href=&quot;#&quot; class=&quot;number&quot; data-filter=&quot;.text&quot; onClick=&quot;test(1, 1)&quot;&gt;Test&lt;/a&gt; ;
Text += &lt;a href=&quot;#&quot; class=&quot;number&quot; data-filter=&quot;.text1&quot; onClick=&quot;test(1, 1)&quot;&gt;Test1&lt;/a&gt;;
code.innerHTML = Text;
}

  2. </details>
  3. # 答案1
  4. **得分**: 0
  5. 不要翻译代码部分，以下是翻译好的内容：
  6. Instead of add `onclick=&quot;test(${totalP}, ${1})&quot;` use [`addEventListener`][1] to bind the click event to your target element after you append your pagination. See the following example.
  7. 改用 [`addEventListener`][1] 来绑定点击事件到您的目标元素，而不是使用 `onclick=&quot;test(${totalP}, ${1})&quot;`，在您附加分页后进行绑定。请参考以下示例。
  8. <details>
  9. <summary>英文:</summary>
  10. Instead of add `onclick=&quot;test(${totalP}, ${1})&quot;` use [`addEventListener`][1] to bind the click event to your target element after you append your pagination. See the following example.
  11. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  12. &lt;!-- language: lang-js --&gt;
  13. const pagiselector = document.querySelector(&quot;.portfolio__filter__pagi&quot;);
  14. function test(totalPages, page) {
  15. let pagicode = &quot;&quot;;
  16. let beforePage = page - 1;
  17. let afterPage = page + 1;
  18. let activeLi = &quot;&quot;;
  19. let totalP = totalPages;
  20. if (page &gt; 1) {
  21. pagicode += `&lt;a href=&quot;#&quot; onclick=&quot;test(${totalP}, ${page - 1})&quot; class=&quot;arrow__pagination left__arrow&quot; data-filter=&quot;.pagi-${page - 1}&quot;&gt;&lt;li&gt;
  22. &lt;span class=&quot;arrow_left&quot;&gt;&lt;/span&gt; Prev&lt;/li&gt;&lt;/a&gt;`;
  23. }
  24. if (page &gt; 2) {
  25. pagicode += `&lt;a href=&quot;#&quot; onclick=&quot;test(${totalP}, ${1})&quot; class=&quot;number__pagination filter&quot; data-filter=&quot;.pagi-${1}&quot;&gt;&lt;li&gt;1&lt;/li&gt;&lt;/a&gt;`;
  26. }
  27. }
  28. let pagiHtml = &quot;&quot;;
  29. for (let i = 0; i &lt; 6; i++) {
  30. pagiHtml += `&lt;a href=&quot;#&quot; class=&quot;number__pagination filter&quot; data-i=&quot;${i}&quot; data-filter=&quot;.pagi-${i}&quot;&gt;&lt;li&gt;${i}&lt;/li&gt;&lt;/a&gt;`
  31. }
  32. pagiselector.innerHTML = pagiHtml;
  33. let anchorsTags = pagiselector.getElementsByTagName(&quot;a&quot;);
  34. for (var i = 0; i &lt; anchorsTags.length; i++) {
  35. anchorsTags[i].addEventListener(&quot;click&quot;, myFunction, false);
  36. }
  37. function myFunction(event) {
  38. event.preventDefault();
  39. console.log(this.getAttribute(&#39;data-i&#39;));
  40. // Your logic here
  41. //test(totalPages, page)
  42. }
  43. &lt;!-- language: lang-html --&gt;
  44. &lt;section class=&quot;portfolio spad&quot;&gt;
  45. &lt;div class=&quot;container&quot;&gt;
  46. &lt;div class=&quot;row&quot;&gt;
  47. &lt;div class=&quot;col-lg-12&quot;&gt;
  48. &lt;ul class=&quot;portfolio__filter&quot;&gt;
  49. &lt;li class=&quot;active&quot; data-filter=&quot;.pagi-1&quot;&gt;
  50. All
  51. &lt;/li&gt;
  52. &lt;li data-filter=&quot;.photo&quot;&gt;
  53. Photo
  54. &lt;/li&gt;
  55. &lt;li data-filter=&quot;.photo_1&quot;&gt;
  56. Photo_1
  57. &lt;/li&gt;
  58. &lt;li data-filter=&quot;.photo_2&quot;&gt;
  59. Photo_2
  60. &lt;/li&gt;
  61. &lt;li data-filter=&quot;.photo_3&quot;&gt;
  62. Photo_3
  63. &lt;/li&gt;
  64. &lt;/ul&gt;
  65. &lt;/div&gt;
  66. &lt;/div&gt;
  67. &lt;div class=&quot;row portfolio__gallery&quot;&gt;
  68. &lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo&quot;&gt;
  69. &lt;div class=&quot;portfolio__item&quot;&gt;
  70. &lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  71. &lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  72. &lt;/div&gt;
  73. &lt;div class=&quot;portfolio__item__text&quot;&gt;
  74. &lt;h4&gt;
  75. image
  76. &lt;/h4&gt;
  77. &lt;ul&gt;
  78. &lt;li&gt;
  79. portfolio
  80. &lt;/li&gt;
  81. &lt;li&gt;
  82. Photo
  83. &lt;/li&gt;
  84. &lt;/ul&gt;
  85. &lt;/div&gt;
  86. &lt;/div&gt;
  87. &lt;/div&gt;
  88. &lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1&quot;&gt;
  89. &lt;div class=&quot;portfolio__item&quot;&gt;
  90. &lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  91. &lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  92. &lt;/div&gt;
  93. &lt;div class=&quot;portfolio__item__text&quot;&gt;
  94. &lt;h4&gt;
  95. image
  96. &lt;/h4&gt;
  97. &lt;ul&gt;
  98. &lt;li&gt;
  99. portfolio
  100. &lt;/li&gt;
  101. &lt;li&gt;
  102. Photo_1
  103. &lt;/li&gt;
  104. &lt;/ul&gt;
  105. &lt;/div&gt;
  106. &lt;/div&gt;
  107. &lt;/div&gt;
  108. &lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1&quot;&gt;
  109. &lt;div class=&quot;portfolio__item&quot;&gt;
  110. &lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  111. &lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  112. &lt;/div&gt;
  113. &lt;div class=&quot;portfolio__item__text&quot;&gt;
  114. &lt;h4&gt;
  115. image
  116. &lt;/h4&gt;
  117. &lt;ul&gt;
  118. &lt;li&gt;
  119. portfolio
  120. &lt;/li&gt;
  121. &lt;li&gt;
  122. Photo_1
  123. &lt;/li&gt;
  124. &lt;/ul&gt;
  125. &lt;/div&gt;
  126. &lt;/div&gt;
  127. &lt;/div&gt;
  128. &lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2&quot;&gt;
  129. &lt;div class=&quot;portfolio__item&quot;&gt;
  130. &lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  131. &lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  132. &lt;/div&gt;
  133. &lt;div class=&quot;portfolio__item__text&quot;&gt;
  134. &lt;h4&gt;
  135. image
  136. &lt;/h4&gt;
  137. &lt;ul&gt;
  138. &lt;li&gt;
  139. portfolio
  140. &lt;/li&gt;
  141. &lt;li&gt;
  142. Photo_2
  143. &lt;/li&gt;
  144. &lt;/ul&gt;
  145. &lt;/div&gt;
  146. &lt;/div&gt;
  147. &lt;/div&gt;
  148. &lt;div class=&quot;col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3&quot;&gt;
  149. &lt;div class=&quot;portfolio__item&quot;&gt;
  150. &lt;div class=&quot;portfolio__item__video set-bg lazyloaded&quot; data-setbg=&quot;&lt;!-- image --&gt;&quot;&gt;
  151. &lt;a href=&quot;&lt;!-- image --&gt;&quot; class=&quot;play-btn&quot; data-lbwps-width=&quot;480&quot; data-lbwps-height=&quot;720&quot; data-lbwps-srcsmall=&quot;&lt;!-- image --&gt;&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  152. &lt;/div&gt;
  153. &lt;div class=&quot;portfolio__item__text&quot;&gt;
  154. &lt;h4&gt;
  155. image
  156. &lt;/h4&gt;
  157. &lt;ul&gt;
  158. &lt;li&gt;
  159. portfolio
  160. &lt;/li&gt;
  161. &lt;li&gt;
  162. Photo_3
  163. &lt;/li&gt;
  164. &lt;/ul&gt;
  165. &lt;/div&gt;
  166. &lt;/div&gt;
  167. &lt;/div&gt;
  168. &lt;/div&gt;
  169. &lt;!-- function pagination code 
  170. &lt;ul class=&quot;portfolio__filter__pagi&quot;&gt;
  171. &lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-1&quot;&gt;1&lt;/li&gt;
  172. &lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-2&quot;&gt;2&lt;/li&gt;
  173. &lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-3&quot;&gt;3&lt;/li&gt;
  174. &lt;li class=&quot;number__pagination&quot; data-filter=&quot;.pagi-6&quot;&gt;6&lt;/li&gt;
  175. &lt;/ul&gt;
  176. --&gt;
  177. &lt;!-- js pagination code --&gt;
  178. &lt;ul class=&quot;portfolio__filter__pagi&quot;&gt;
  179. &lt;!-- 
  180. &lt;a href=&quot;#&quot; onclick=&quot;test(6,1)&quot; class=&quot;arrow__pagination left__arrow&quot; data-filter=&quot;.pagi-1&quot;&gt;&lt;li&gt;
  181. &lt;span class=&quot;arrow_left&quot;&gt;&lt;/span&gt; Prev&lt;/li&gt;&lt;/a&gt;
  182. &lt;a href=&quot;#&quot; onclick=&quot;test(6,1)&quot; class=&quot;number__pagination&quot; data-filter=&quot;.pagi-1&quot;&gt;&lt;li&gt;2&lt;/li&gt;&lt;/a&gt;
  183. &lt;a href=&quot;#&quot; onclick=&quot;test(6,2)&quot; class=&quot;number__pagination active&quot; data-filter=&quot;.pagi-2&quot;&gt;&lt;li&gt;2&lt;/li&gt;&lt;/a&gt;
  184. --&gt;
  185. &lt;/ul&gt;
  186. &lt;!-- end snippet --&gt;
  187. [1]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  188. </details>

huangapple
  • 本文由 发表于 2023年8月10日 16:52:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76874112.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定