javascriptの追加テキストの変更、

Question

私は、次のしているフィルタ機能以外に - 私のコードで実装jQueryの同位体ベースのフィルタ、そのフィルタリングのn表示 - フィルタコンテンツ、ボタンのクリックに基づいて：

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> 

私は、同じボタンのクリックに基づいて、次のコードの表示値を変更しようとしています。フィルタリング以外の追加機能を意味します。

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

多くのことを試してみましたが、何も機能しませんでした。助けてください。

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