我使用jQuery的同位素,並試圖改變一個div類HTML文本,與changeMe
,基於/其他問題的if/else:jQuery的同位素,如果使用的indexOf
var $chofval = $(".changeMe").html(filterAttr);
// search if it contains these strings
if ($chofval.indexOf("*") >= 0) {
$(".changeMe").html("All Apples");
} else if ($chofval.indexOf(".green") >= 0) {
$(".changeMe").html("Green Apples");
}
但它給*
和.green
點擊按鈕。任何猜測我錯在哪裏?
全碼:
<script>
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);
var $chofval = $(".changeMe").html(filterAttr);
// search if it contains these strings
if ($chofval.indexOf("*") >= 0) {
$(".changeMe").html("All Apples");
} else if ($chofval.indexOf(".green") >= 0) {
$(".changeMe").html("Green Apples");
}
});
// 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>