У меня есть следующий — фильтр на основе изотопов 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>
Перепробовал столько всего, но ничего не получалось. Помогите, пожалуйста.
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')
Других решений пока нет …