Изменение дополнительного текста в JavaScript, при нажатии кнопки в изотопе jQuery, кроме функции фильтра

У меня есть следующий — фильтр на основе изотопов jquery, реализованный в моем коде, его фильтрация и отображение — отфильтрованное содержимое, основанное на нажатии кнопки 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>

Код кнопки:

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

Перепробовал столько всего, но ничего не получалось. Помогите, пожалуйста.

0

Решение

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: Вы должны определенно использовать идентификатор или имя класса для абзаца вашей цитаты, а также, если вы используете атрибут данных, вы можете получить к нему прямой доступ без атрибута, т.е.

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

работает так же, как

$(this).data('filter')
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]