jQuery同位素if/else使用indexOf时出现问题

jQuery Isotope if/else issues with using indexOf

本文关键字：问题 indexOf 使用 同位素 if else jQuery      更新时间：2024-01-03

我正在使用jQuery Isotope，并尝试使用changeMe更改div类中的HTML文本，基于if/else:

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>

此行使用filterAttr的值更改".changeMe"的内容，并且不能返回".changeMe"对象的内容值。

var $chofval = $(".changeMe").html(filterAttr);

如果你想获得".changeMe"的内容来评估使用：

var $chofval = $(".changeMe").html();

但是，如果您试图获取定义为filterAttr的entitiy.changeMe的属性值，请使用：

var $chofval = $(".changeMe").attr(filterAttr);

或者最后，如果filterAttr是要检查的真实值，请在句子中使用此值对其进行评估：

if(filterAttr.indexOf("*") >= 0){
    $(".changeMe").html("All Apples");  
} else if(filterAttr.indexOf(".green") >= 0){
    $(".changeMe").html("Green Apples");
}

请参阅JQuery Attr

if(filterAttr == "*") {      
    $(".Me").html("All Apples");    
}
else if(filterAttr == ".green") {
    $(".changeMe").html("Green Apples");
}
相关文章：