Question

我正在创建一个配方工具，通过所选复选框获取用户的输入。见这里：zelda.wptoolkit.us

第一部分：我有一个脚本，它将根据所选的输入值创建一个slug数组。当用户单击复选框时，关联的slug将添加到名为checkedAttr的数组中。

<script>
var checkedAttr = [];

$('#wp-advanced-search :checkbox').change(function() 
{
checkedAttr = [];
$('#wp-advanced-search :checkbox').each(function(i, item){
    if($(item).is(':checked'))
    {
        checkedAttr.push($(item).val()); 
    }
});
console.log("checkedAttr:", checkedAttr);
});
</script>

第二部分：我正在尝试使用下面的代码.addClass到包含第一部分数组中的slug的任何链接。

链接结构：http://zelda.wptoolkit.us/tag/any-crab/

代码：

<script type="text/javascript">
jQuery(function() {
jQuery('#wpas-results-inner > div > div > p > a[href^="/tag/' + 
location.pathname.split("/") this.checkedAttr[0] + '"]').addClass('active');
});
</script>

我的目标是定位每张卡片中的链接，然后在我的阵列中找到slug的链接中添加一个类。最终目标是突出检查的成分＆＃39;并淡出尚未检查的成分。

我不确定如何让这个函数检查每个slug的数组，我很想知道完成这个步骤需要哪些步骤！

我也不确定我的jQuery CSS路径是否正确定位链接

感谢您的任何见解！

Answer 1

如果您正在寻找类似于选择特定复选框的内容，则应启用与该复选框相关的所有卡（例如，应用任何类active），一旦取消选中该复选框，我们需要删除来自所有相关复选框的特定类??

你可以查看给定的小提琴。 https://jsfiddle.net/stdeepak22/x1L95dw3/1/

var checkedAttr = [];

$('#checkBoxForCategory :checkbox').change(function() 
{
        var cardCategory = $(this).val();    
    var allCards = $('.myCard[card-category=' + cardCategory + ']');

    if($(this).is(':checked'))
    {
            //add the selected category to array
        checkedAttr.push(cardCategory); 

        //add the `active` class for all the card belongs to selected category
        $(allCards).each(function()
        {
          $(this).addClass('active');
        });
    }
    else
    {
        //remove from array
      var index = checkedAttr.indexOf(cardCategory);
      checkedAttr.splice(index, 1);

      //remove the class for all the card belongs to selected category
        $(allCards).each(function()
      {
        $(this).removeClass('active');
      });
    }    

    console.log("checkedAttr:", checkedAttr);
});

添加类来链接基于slug数组的slug

1 个答案: