Question

我有以下 - 基于jquery同位素的过滤器在我的代码中实现，其过滤n显示 - 过滤内容，基于BUTTON点击：

~
^ \h*+ # start of the line
# named captures                            # field separators
(?<VOTERNO>     [0-9]+                     )  \h+
(?<SURNAME>     \S+ (?>\h\S+)*?            )  \h{2,}
(?<OTHERNAMES>  \S+ (?>\h\S+)*?            )  \h{2,}
(?<DOB>         [0-9]{2}-[0-9]{2}-[0-9]{4} )  \h+
(?<SEX>         [FM]                       )  \h+
(?<APPID_RECNO> [0-9A-Z/]+                 )  \h+
(?<VILLAGE>     \S+ (?>\h\S+)*             ) 
\h* $  # end of the line
~mx

按钮代码：

    function getHashFilter() {
    // get filter=filterName
    var matches = location.hash.match( /filter=([^&]+)/i );
    var hashFilter = matches && matches[1];
    return hashFilter && decodeURIComponent( hashFilter );
    }

    $( function() {

    var $container = $('.isotope');

    // bind filter button click
    var $filterButtonGroup = $('.filter-button-group');
    $filterButtonGroup.on( 'click', 'button', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
    });


    // bind filter on select change
    $('.filters-select').on( 'change', function() {
    // get filter value from option value
    var filterValue = this.value;
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
    });


    var isIsotopeInit = false;

    function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
    return;
    }
    isIsotopeInit = true;
    // filter isotope
    $container.isotope({
    itemSelector: '.offer-type',
    layoutMode: 'fitRows',

    // use filterFns
    filter: filterFns[ hashFilter ] || hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
    $filterButtonGroup.find('.is-checked').removeClass('is-checked');
    $filterButtonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
    }

    $(window).on( 'hashchange', onHashchange );

    // trigger event handler to init Isotope
    onHashchange();

    });
    //@ sourceURL=pen.js
    </script>

我正在尝试根据相同的按钮点击更改以下代码的显示值。除了过滤之外，意味着额外的功能。

        <div id="filters" class="button-group filter-button-group">
        <div class="my123"> 
        <ul>
        <li>
        <button class="button" data-filter=".a1">Red Apples</button>
        </li>
        <li>
        <button class="button" data-filter=".b1">Green Apples</button>
        </li>
        </ul>
        </div>
        </div>

尝试了很多东西，但没有任何效果。请帮助。

Answer 1

var $filterButtonGroup = $('.filter-button-group');
$filterButtonGroup.on( 'click', 'button', function() {
  var filterAttr = $( this ).attr('data-filter');
  // set filter in hash
  location.hash = 'filter=' + encodeURIComponent( filterAttr );
  $("blockquote p").html("The value of data attr on button is" + filterAttr);
});

PS：您应该明确地为您的blockquote段落使用id或类名称，如果您使用数据属性，您可以直接访问它而不需要属性，即

$(this).attr('data-filter');

与

相同

$(this).data('filter')

javascript附加文本更改，按钮点击jQuery同位素，除了过滤功能

1 个答案: