Question

我有一堆表示过滤器的复选框，因此，单击复选框时，应向过滤器数组添加一个包含过滤器类型（分类法）和值（术语）的对象。

单击复选框时，它首先添加一个包含分类法和术语属性的新对象。到目前为止，这有效。问题是，当我单击具有已存在的分类法值的第三个复选框时，它将向该数组添加一个全新的对象，而不是将该术语添加到现有的术语数组中。

这是现在的样子：

<input type="checkbox" id="term-1" value="term-1" name="taxonomy-1">
<label for="term-1">Term 1</label>

<input type="checkbox" id="term-2" value="term-2" name="taxonomy-1">
<label for="term-2">Term 2</label>

<input type="checkbox" id="term-3" value="term-3" name="taxonomy-1">
<label for="term-3">Term 3</label>

File1.js

import FilterModule from '../helpers/filter-module';

class View {
    constructor() {
        self.filterModule = new FilterModule();
        this.$filters = $( '[data-filters]' );
    }
    
    // Called after api got data
    update() {
        // Set event listener for select(s)
        this.$filters.find( 'select' ).on( 'change', this.handleFiltering );
        this.$filters.find( 'input[type="checkbox"]' ).on( 'change', this.handleFiltering );
    }

    handleFiltering() {
        let tax = $( this ).attr( 'name' );
        const term = $( this ).val();
        self.filterModule.handleCheckbox( $( this ), tax, term );
    }
}

export default new View();

File2.js

import Api from '../helpers/api';

export default class FilterModule {
    handleCheckbox( checkbox, tax, term ) {
        const filters = Api.response.filters.active_filters;

        if ( $( checkbox ).is( ':checked' ) ) {

            // Check if taxonomy exists, if not, add it
            const index = filters.findIndex( x => x.taxonomy === tax );
            if ( index === -1 ) {
                console.log( 'does not exist, add new taxonomy object' );

                // Add new selection
                filters.push( {
                    taxonomy: tax,
                    terms: [ term ]
                } );
            } else {
                console.log( 'tax exists, push new term into it' );
                filters.find( x => x.taxonomy === tax ).terms.push( term );
            }

            console.log( filters );

        }

        // Update data
        this.update();
    }

    update() {
        Api.fetch();
    }
}

因此第一个复选框的点击效果很好，结果将是：

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1' ]
}

第二次点击：

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1', 'term-2' ]
}

但是第三次点击会导致：

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1', 'term-2' ]
},
{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-3' ]
},

我不明白为什么要添加一个新对象，而不是将其推送到现有分类法的terms数组中。

Answer 1

我创建了一个可行的代码示例，但将let tax = $(this).attr('id')更改为let tax = $(this).attr('name');。

到目前为止，一切都按预期工作，将术语添加到现有对象中，而不是创建新对象：

$('input[type="checkbox"]').on('change', this.handleFiltering);

const activeFilters = [];

function handleFiltering() {
    let tax = $(this).attr('name');
    const term = $(this).val();

    handleCheckbox($(this), tax, term);
}


function handleCheckbox(checkbox, tax, term) {

    // activeFilters represents an array
    if ($(checkbox).is(':checked')) {

        // Check if taxonomy exists, if not, add it
        const index = activeFilters.findIndex(x => x.taxonomy === tax);
        if (index === -1) {
            console.log('does not exist, add new object');

            // Add new selection
            activeFilters.push({
                taxonomy: tax,
                terms: [term]
            });
        } else {
            console.log('tax exists, push new term into it');
            activeFilters.find(x => x.taxonomy === tax).terms.push(term);
        }

    }
    
    output.innerHTML = JSON.stringify(activeFilters, null, 2);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="term-1" value="term-1" name="taxonomy-1">
<label for="term-1">Term 1</label>

<input type="checkbox" id="term-2" value="term-2" name="taxonomy-1">
<label for="term-2">Term 2</label>

<input type="checkbox" id="term-3" value="term-3" name="taxonomy-1">
<label for="term-3">Term 3</label>

<pre id="output"></pre>

将项目添加到对象中的数组

1 个答案: