Question

您可以在此处查看我正在处理的网站：zelda.wptoolkit.us

基本上，我有一个带有复选框的表单，其中列出了一堆实际上是WordPress帖子标签的“成分”。用户将点击他们想要的成分，然后根据食谱（帖子）是否包含这些成分选项（标签）自动更新“食谱”帖子。

我的问题是，如何存储一组“已检查”框，然后使用此标记后插图数组将类添加到配方结果卡中找到的相应链接？

这是我想要完成的事情的模拟： https://cloudup.com/cNfVNMzePpl

Answer 1

试一试。我认为这就是你追求的目标。无法真正测试它，但它应该可以正常工作

$(".wpas-checkbox").change(function() {
    if(this.checked) {
        var val = $(this).val().toLowerCase();
        var activeClass = 'active';

        $('.myCard a').each(function() {
            if(val == $(this).text().toLowerCase()) {

                $(this).addClass(activeClass');
            }
        });
    }
});

Answer 2

问题是复选框val不等于链接文本复选框中的 value =“any-flower”，但在链接文字中“Any Flower”。因此必须选择任何复选框的标签文本：

   var label_text = $('---checkboxSelector---').next().html();

并按下 checkedAttr 变量

然后在ajax的完整功能中：

    $('.myCard a').each(function() {
         var a_text = $(this).text();
         for (var i = 0; i < checkedAttr.length; i++) {
              if(checkedAttr[i] == a_text ) {
                  $(this).addClass('activeClass');
              }
         }
    });

Answer 3

发现它！不得不修改Saeeds代码，但他是一位绅士和学者，我现在感激不尽！

<script>
(function($) {

   var checkedAttr = [];
   $("input.wpas-checkbox[name='tax_post_tag[]']:checked").each(function(){
      checkedAttr.push($(this).val().replace(/-/g, " "));
   });

   console.log(checkedAttr);

   $('.myCard a').each(function() {
      var a_text = $(this).text().toLowerCase();
      for (var i = 0; i < checkedAttr.length; i++) {
       if(checkedAttr[i] == a_text ) {
         $(this).addClass('activeClass');
      }
   }
   console.log('a_text: ', a_text);
}); 
})( jQuery );
</script>

使用复选框数组将类添加到结果链接

3 个答案: