Javascript Ergänzungstext ändern, auf die Schaltfläche klicken in jQuery Isotop, andere als Filterfunktion

Question

Ich habe folgende - jquery Isotopen-basierte Filter in meinem Code implementiert, dessen Filter n Anzeige - gefilterten Inhalt, basierend auf Schaltfläche klicken:

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> 

ich versuche Anzeigewert von folgendem Code zu ändern, basierend auf derselben Taste klicken. Bedeutet zusätzliche Funktion, außer Filterung.

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

Ich habe so viele Dinge versucht, aber nichts hat funktioniert. Hilfe bitte.

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: Sie sollten auf jeden Fall eine ID oder Klassenname für Ihre Blockquote des Absatzes verwenden und auch, wenn Sie Daten verwenden Attribut Sie können es direkt ohne Attribut zugreifen dh

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

helfen wie