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

你可以在这里看到我正在工作的站点：

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

我的问题是，我如何存储一个“选中”框数组，然后使用这个标签后段塞数组将一个类添加到配方结果卡中相应的链接中

以下是我试图实现的目标的模型：

---

试试这个。我想这就是你想要的。无法真正测试它，但它应该可以工作

$(".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');
            }
        });
    }
});

---

例如，问题是复选框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');
              }
         }
    });          

$（'.myCard a'）。每个（函数（）{
var a_text=$（this.text（）；
对于（变量i=0；i

找到了！不得不修改赛义德的密码，但他是一位绅士和学者，我现在很感激他

<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>

（函数（$）{
var checkedAttr=[]；
$（“input.wpas复选框[name='tax_post_tag[]']：选中”）。每个（函数（）{
选中的ttr.push（$（this.val（）.replace（/-/g，“”））；
});
控制台日志（checkedAttr）；
$（'.myCard a'）。每个（函数（）{
var a_text=$（this.text（）.toLowerCase（）；
对于（变量i=0；i

因此，如果选中多个复选框，则所有内容都将在帖子中突出显示（如第二张图片所示），使用您知道可以找到的类设置初始脚本。然后，当单击任何内容时，将任何操作应用于具有该类的元素..正如我看到的，当任何复选框单击时，您将获得html（呈现html）。因此，在将html作为响应发送到ajax时，将活动类添加到配料中。这将是更容易的嗯，这肯定是朝着正确的方向！我添加了您的代码，但似乎无法使其正常工作。最终结果应该是在边栏中勾选的任何成分都会将“活动”类应用到结果配方卡中“成分”中的相关链接。基本上，我希望选中的成分高亮显示，而其余未选中的成分则灰显。我会继续调整这个代码，如果你看到任何明显的问题，请指出他们！谢谢你！嘿！这看起来很棒。至于'并推到您的checkedAttr变量，我在var标签_文本下添加了这个，但我不确定它是否正常工作：

var checkedAttr=[]；选中的ttr.push（标签文本）

这个想法是通过使用复选框上的

.next（）

和

.html（）

来获取html文本，我相信选择器应该是

.wpas复选框

，尽管我可能错了。然后，将值存储在

var label_text

中，然后将每个复选框标签文本推送到checkedAttr数组中。在我们拥有一个字符串数组之后，我们将把数组中的每个字符串与

.myCard

下的链接进行比较。对吧？没错。我已经在你的网站上用chrome控制台测试了这种方法，并且成功了。