javascript ek metin değişikliği,

Question

ben şu var filtre fonksiyonu dışında - benim kodda uygulandığı jQuery İzotop temelli filtre, onun filtreleme n görüntülenmesi - filtrelenmiş içerik, DÜĞME tıklama temelinde:

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> 

düğme kodu:

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

aynı düğme tıklama temelinde, aşağıdaki kodun ekran değerini değiştirmek çalışıyorum. Filtreleme dışında ek fonksiyon anlamına gelir.

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

Çok fazla şey denediniz, ancak hiçbir şey işe yaramadı. Yardım lütfen.

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: Sen kesinlikle sizin blockquote en paragraf için bir id veya sınıf adı kullanın ve verileri kullanıyorsanız ayrıca doğrudan

aynı

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

eser yani özniteliği duymadan erişebilmek mi vermeliyiz

$(this).data('filter')