-1

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

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

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

我使用 jquery isotope 作为过滤工具，如果有帮助，它会添加选定的类。

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;
    });
});
4

1 回答 1

1

为什么不尝试$('#datesorter').toggle();在添加“选定”类的相同位置使用？

于 2013-04-11T13:09:55.240 回答