使用.toggleClass（）切换不透明度时出现问题

Question

我在

的地方

我尝试使用jQuery的.toggleClass（）来将一系列政治家的照片的不透明度从0.5到1的不透明度切换，当时某个类别中的一个选项（无线电输入）是:clicked。 ie。 点击女性，会将所有女性照片的不透明度更改为1.

我被困的地方

单击选项无法正确更改相应图像的不透明度。 data which is pulled from var MLA =[]张照片。对于单个选项/单击单选按钮，多次写.toggleClass（）会有什么更有效的方法？

尝试：

// Option #1: Gender
    $( ".G1" ).click(function() {
        $(".G2").toggleClass("disabled");
        $(".headshot").not(".Female").toggleClass("opacity");
    });

    $( ".G2" ).click(function() {
        $(".G1").toggleClass("disabled");
        $(".headshot").not(".Male").toggleClass("opacity");
    });

    // Option #2: Age
    $( ".A1" ).click(function() {
        $(".A2").toggleClass("disabled");
        $(".A3").toggleClass("disabled");
        $(".Low").toggleClass("show");
    });

    $( ".A2" ).click(function() {
        $(".A1").toggleClass("disabled");
        $(".A3").toggleClass("disabled");
        $(".Medium").toggleClass("show");
    });

    $( ".A3" ).click(function() {
        $(".A1").toggleClass("disabled");
        $(".A2").toggleClass("disabled");
        $(".High").toggleClass("show");
    });

scripts.js中

// MLAs
    var MLAs = [
    {
        "Name": "Nancy Allan",
        "Age": 62,
        "Constuency": "St. Vital",
        "Party": "NDP",
        "Gender": "Female",
        "Ethnicity": "White"
    },
    { // Missing Data
        "Name": "James Allum",
        "Age": null,
        "Constuency": "Fort Garry-Riverview",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
    },
    {
        "Name": "Rob Altemeyer",
        "Age": 46,
        "Constuency": "Wolseley",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
    },
    {
        "Name": "Steve Ashton",
        "Age": 58,
        "Constuency": "Thompson",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
    }];

    var filteredMLAs = MLAs.slice(0); // copy MLAs
    var total = filteredMLAs.length;

    var refreshList = function () {
        var list = filteredMLAs;
        setTotal(list.length);

        $MLA_List.empty();
        $.each(list, function (index, value) {
            $MLA_List.append($('<li/>').text(list[index].Name));
        });
    };
    var setTotal = function (value) {
        $total.text(value);
    };

    // filter methods
    var gender = function (array, gender) {
        //console.log('gender filter called!', gender);
        return _.where(array, {
            "Gender": gender
        });
    };

    var ethnicity = function (array, ethnic) {
        //console.log('ethnic filter called!', array, ethnic);
        return _.where(array, {
            "Ethnicity": ethnic
        });
    };

    var age = function(array, ageRange) {
        //under 35, 36-64, 65+
        return _.filter(array, function(MLA) {
            //console.log(MLA.Age);
            switch(ageRange) {
                case 35:
                    return ( MLA.Age <= 35 );
                case 36:
                    return ( MLA.Age >= 35 && MLA.Age <= 64);
                case 65:
                    return ( MLA.Age >= 65 );
            };
            return false;
        });
    };

    var activeFilters = [];
    var setFilter = function (method, param) {
        var newFilter = {
            method: method,
            param: param
        };

        var matchedFilter = _.find(activeFilters, newFilter),
            index = activeFilters.indexOf(matchedFilter);

        if ( index == -1 ) {
            activeFilters.push(newFilter);
        } 

        applyFilter();
    };

    var removeFilter = function(method, param) {
        var filter = {
            method: method,
            param: param
        };

        var index = activeFilters.indexOf(_.find(activeFilters, filter));

        if (index > -1) {
            activeFilters.splice(index, 1);
        }

        applyFilter(); // re-apply filter to update list
    };

    var applyFilter = function () {
        var filtered = MLAs.slice(0);
        $.each(activeFilters, function () {
            filtered = this.method(filtered, this.param);
        });
        filteredMLAs = filtered ? filtered: [];
        refreshList();
    };

    $('#Male, #Female').click(function () {
        //console.log(this.id);
        removeFilter(gender, this.id =='Male'? 'Female': 'Male'); // remove not active filter
        setFilter(gender, this.id);
    });

    $('#White, #Black, #Asian, #Metis, #Aboriginal').click(function () {
        //console.log(this.checked);
        var checkedEthnic = _.pluck($('input[name="ethnicity"]'), 'checked'); // array with true/false values
        var checkedCount = _.reduce(checkedEthnic, function(memo, num){ 
            return memo + num; 
        }, 0);
        console.log(checkedCount);

        if ( checkedCount <= 2 ) {
            if ( this.checked ) {
                setFilter(ethnicity, this.id); //'White');
            }
            else {
                removeFilter(ethnicity, this.id); //'White');
            }
        }
        else {
            console.log('Max. 2 ethnic filters can be active!');
            this.checked = false;
        }
    });

    $('.Age').click(function() {
        removeFilter(age, 35); // improvement of remove filter required, e.g. remove all age filters
        removeFilter(age, 36);
        removeFilter(age, 65);
        setFilter(age, parseInt(this.value));
    });

    $('#reset').click(function(){
        //console.log('reset form');
        activeFilters = [];
        $(':checkbox, :radio').attr('checked', false);
        applyFilter();
    });

    $(function () {
        refreshList();
    });

的index.html

<div class="columns">
    <img src="assets/img/headshots/allan.jpg" alt="Test" id="0" class="headshot NDP Female White">
    <img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
    <img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
    <img src="assets/img/headshots/ashton.jpg" alt="" id="3" class="headshot NDP Male White">
</div>

chart.scss（爆头造型）

    /*----------------------------------
    HEADSHOTS
    ----------------------------------*/
    .headshot {
        width: 70px;
        height: 110px;
        opacity: 0.5;

        &:hover, &:active {
            @include transitions;
            opacity: 1;
            cursor: pointer;
        }
    }

// Toggle class for when MLAs selected
.opacity {
    @include transitions;
    opacity: 1;
}

.disabled {
    pointer-events: none;
}

.enabled {
    pointer-events: auto;
}

Answer 1

请原谅我 - 我还不太熟悉SCSS语法，但名为opacity的类在哪里？我只看到一个名为.headshot的类，其中一个名为opacity的属性随之改变：hover和：active。