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

Question

我正在尝试创建一个函数，将在数组中添加/删除复选框值。我想从元素的 ID 属性创建数组名称(我不确定这是否是实现的最佳方法)。如果 ID 是“color”，则值将被推送到“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

您需要先创建一个具有所需名称的变量，然后才能访问它

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

$('.filter').each(function () {
   var filterName = $(this).attr("id");
   var filterArray = filterName + "Filter";
   if(typeof(window[filterArray]) == 'undefined' || window[filterArray] == null)
       window[filterArray] = new Array();
   $(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 = window[filterArray].indexOf( val ) ) > -1 ) {
           window[filterArray].splice( idx, 1 );
           setTimeout( function() { $input.prop( 'checked', false ) }, 0);
       } else {
           window[filterArray].push( val );
           setTimeout( function() { $input.prop( 'checked', true ) }, 0);
       }

   });
});