Question

我正在尝试创建一个将复选框值添加/删除到数组中的函数。我想从元素的ID属性创建数组名称（我不确定它是否是最好的实现方式）。如果ID是“颜色”，则值将被推送到“colorFilter”，或者如果ID是“size”，则它将被推送到“sizeFilter”。问题是我得到“filterArray.push不是函数”错误。

var colorFilter = [];
var sizeFilter = [];

$('.filter').each(function () {
    var filterName = $(this).attr("id");
    var filterArray = filterName + "Filter";
    $(this).find('a').on( 'click', function( event ) {

        var $target = $( event.currentTarget );
        var val = $target.attr( 'data-value' );
        var $input = $target.find( 'input' );
        var idx;

        if ( ( idx = filterArray.indexOf( val ) ) > -1 ) {
            filterArray.splice( idx, 1 );
            setTimeout( function() { $input.prop( 'checked', false ) }, 0);
        } else {
            filterArray.push( val );
            setTimeout( function() { $input.prop( 'checked', true ) }, 0);
        }

        getItems();
    });
});
function getItems() {
    $.ajax({
        url: "#",
        type: "GET",
        dataType: "JSON",
        data: {
            'color': colorFilter,
            'size': sizeFilter
        }
    });
}

这是我的HTML：

<ul id="color" class="filter">
    <li>
        <a href="#" data-value="red">
            <input type="checkbox"/>Red
        </a>
    </li>
    <li>
        <a href="#" data-value="blue">
            <input type="checkbox"/>Blue
        </a>
    </li>
</ul>

<ul id="size" class="filter">
    <li>
        <a href="#" data-value="10x14">
            <input type="checkbox"/>10x14
        </a>
    </li>
    <li>
        <a href="#" data-value="3x5">
            <input type="checkbox"/>3x5
        </a>
    </li>
</ul>

Answer 1

在访问之前，您需要创建一个具有所需名称的变量

colnames()然后使用此变量。实现它的方式window[filterArray] = new Array();只是一个字符串而不是一个数组所以你的代码将是

filterArray

Answer 2

首先，您希望过滤器阵列名称为$(this).attr("id") + "Filter"，并且您定义了colorFilter和sizeFilter，但您的元素ID为"colors"和"sizes"，而不是"color"和"size"。

其次，您需要var filterArray = filterName + "Filter";而不是var filterArray = window[filterName + "Filter"];。这将捕获您正在寻找的数组。

最后，在onclick事件处理程序中移动filterName和filterArray的声明，如下所示：

$(this).find('a').on( 'click', function( event ) {
    var filterName = $(this).closest("ul").attr("id");
    var filterArray = window[filterName + "Filter"];
    var $target = $( event.currentTarget );
    var val = $target.attr( 'data-value' );
    var $input = $target.find( 'input' );
    var idx;

    if ( ( idx = filterArray.indexOf( val ) ) > -1 ) {
        filterArray.splice( idx, 1 );
        setTimeout( function() { $input.prop( 'checked', false ) }, 0);
    } else {
        filterArray.push( val );
        setTimeout( function() { $input.prop( 'checked', true ) }, 0);
    }

});

将字符串附加到元素属性的末尾

2 个答案: