Question

我正在使用一种与w3学校的this one非常相似的方法来过滤div中的元素。我目前无法将此工作脚本添加到我的Aurora Wordpress网站中。但是，由于onclick（）函数的剥离。有没有人有一个解决方法，能够过滤这样的元素？也许没有使用这个功能或绕过阻止？我已经阅读过有关使用短代码的内容，但大多数这些示例都是href链接而不是输入按钮/希望将来某个时候有一个下拉选项，我试图将它们实现到我的解决方案中是不成功的。这是一个小用法示例（完整的JS代码在此问题顶部链接的页面上）。

<input type="radio" onclick="filterSelection('all')" name="category" checked>Show all<br>
<input type="radio" onclick="filterSelection('1')" name="category"> Option 1
<input type="radio" onclick="filterSelection('2')" name="category"> Option 2

等

Answer 1

              <button class="button" data-filter=".<?php echo $term_tech->slug; ?>"><?php echo $term_tech->name; ?>(<?php echo $term_tech->count; ?>)</button>
             <?php

      $port = array(

      'posts_per_page'   => -1,

      'orderby' => 'menu_order',

      'order' => 'ASC',

      'post_type' => 'portfolio',

      'post_status' => 'publish'

      );







      $portfolioget = get_posts($port);



      foreach ($portfolioget as $portfoliopost){



       echo '<div class="element-item '.implode(" ",get_video_temrs($portfoliopost->ID)).'" data-category="transition">';
      .......code.........
          <script type="text/javascript">

jQuery(window).on('load',function ($) {

//jQuery(".element-item").css('max-height','265px');
    // jQuery(".portfolio-img img").css('min-height','184px');
    //jQuery(".portfolio-img img").addClass('minHightImg');

    jQuery("img.lazy").lazyload({

    effect : "fadeIn",
    effectspeed: 2000

}); 



    var $grid = jQuery('.grid').isotope({

        itemSelector: '.element-item',

        layoutMode: 'fitRows',

        getSortData: {

            name: '.name',

            symbol: '.symbol',

            number: '.number parseInt',

            category: '[data-category]',

            weight: function (itemElem) {

                var weight = jQuery(itemElem).find('.weight').text();

                return parseFloat(weight.replace(/[\(\)]/g, ''));

            }

        }

    });

    var filterFns = {

        // show if number is greater than 50

        numberGreaterThan50: function () {

            var number = jQuery(this).find('.number').text();

            return parseInt(number, 10) > 50;

        },

        // show if name ends with -ium

        ium: function () {

            var name = jQuery(this).find('.name').text();

            return name.match(/ium$/);

        }

    };

    jQuery('#filters').on('click', 'button', function () {

        var filterValue = jQuery(this).attr('data-filter');

        // use filterFn if matches value

        filterValue = filterFns[ filterValue ] || filterValue;

        $grid.isotope({filter: filterValue});

    });

    jQuery('#filters_industries').on('click', 'button', function () {

        var filterValue = jQuery(this).attr('data-filter');

        // use filterFn if matches value

        filterValue = filterFns[ filterValue ] || filterValue;

        $grid.isotope({filter: filterValue});

    });

    jQuery('#sorts').on('click', 'button', function () {

        var sortByValue = jQuery(this).attr('data-sort-by');

        $grid.isotope({sortBy: sortByValue});

    });

    jQuery('.button-group').each(function (i, buttonGroup) {

        var $buttonGroup = jQuery(buttonGroup);

        $buttonGroup.on('click', 'button', function () {

            $buttonGroup.find('.is-checked').removeClass('is-checked');

            jQuery(this).addClass('is-checked');

        });

    });


});

如何使用JS / onclick过滤Wordpress中的元素？

1 个答案: