-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 に答える