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

I have following - jquery Isotope based filter implemented in my code, its filtering n displaying - filtered content, based on BUTTON click:

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

    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>

Button code:

        <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>

I am trying to change display value of following code, based on same button click. Means additional function, other than filteration.

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

 <blockquote>
 <p>
 Value to be changed on each button click
 </p>
 </blockquote>

Tried so many things , but nothing worked. Help please.

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

1 个解决方案

#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 : You should definately use an id or class name for your blockquote's paragraph and also if you are using data attribute you can directly access it without attribute i.e

PS:你应该明确地使用你的blockquote段落的id或类名称,如果你使用数据属性,你可以直接访问它没有属性,即

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

works same as

与...相同

$(this).data('filter')

#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);
});