Question

我有一个通过函数添加了一个类的元素，我想对它进行检查..

如果ELEMENT有课程，则显示另一个元素

我有一个if else语句，我认为它会起作用但class =“selected”似乎只在页面不动态更改类时才起作用。

我使用jquery同位素作为过滤工具，如果有帮助，则添加所选的类。

if ($("#comingsoonfilter").hasClass('selected')){ //this gets dynamically added
    $("#datesorter").css({
        'display' : 'block'
    });
} else {
    $("#datesorter").css({
        'display' : 'none'
    });
}

HTML

<div class="filter big">
    <p>Filter Schemes:</p>
    <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">All Schemes</a></li>
        <li><a href="#filter" data-option-value=".comingsoon" id="comingsoonfilter">Coming Soon</a></li>
    </ul>
    </div>
    <div class="filter">
    <p>View by:</p>
    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
        <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>Date Added</a></li>
        <li><a href="#sortBy=name" data-option-value="name">Alphabetical</a></li>
        <li><a href="#sortBy=price" data-option-value="price">Price</a></li>
        <li><a href="#sortBy=date" data-option-value="date" id="datesorter">Date</a></li>
    </ul>

答案：

如果有人卡住了，那么必须在与添加.selected类的位相同的部分触发该函数javascript的整个部分（包括同位素在下面）。

$(function() {
    var $container = $('.scheme-archive');
    $checkboxes = $('#cityfilters input');
    $container.isotope({
        itemSelector : '.scheme',
                    getSortData : {
            price : function( $elem ) {
                return parseFloat( $elem.find('.price').text().replace( /[\£\,]/g, ''), 1000 );
            },
            date : function( $elem ) {
                return $elem.find('.date').text();
            },
            name : function ( $elem ) {
                return $elem.find('.name').text();
            }
        }
    });

    $checkboxes.change(function() {
        var filters = [];
        // get checked checkboxes values
        $checkboxes.filter(':checked').each(function(){
            filters.push( this.value );
        });
        filters = filters.join(', ');
        $container.isotope({ filter: filters });
    });

    var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function() {
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        // Show / hide the date sorter
    if ($('.selected').is('#comingsoonfilter')){
                $('#datesorter').show();
        } else {
            $('#datesorter').hide();
        }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options );
        } else {
            // otherwise, apply new options
            $container.isotope( options );
        }
        return false;
    });
});

Answer 1

为什么不尝试在添加“已选定”类的地方使用$('#datesorter').toggle();？

如果element具有已动态添加的类，则执行

1 个答案: