사용 배열 당신은 내가 여기에 일하고 사이트를 볼 수 있습니다

Question

결과 링크에 클래스를 추가 : 기본적으로 zelda.wptoolkit.us

, 실제로 워드 프레스있다 '재료'들을 잔뜩 나열 체크 박스와 형태가 태그를 게시하십시오. 사용자가 원하는 재료를 클릭하면 조리법 (게시물)에 이러한 성분 옵션 (태그)이 포함되는지 여부에 따라 '조리법'게시물이 자동으로 업데이트됩니다.

제 질문은 '체크 된'상자 배열을 어떻게 저장하고 게시 태그 슬러그 배열을 사용하여 래서 피 결과 카드에있는 해당 링크에 클래스를 추가합니까? 여기

내가 달성하기 위해 노력하고 무엇까지 모의입니다 : 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

문제를 작동해야하면 해당 확인란 발 예를 들어 동일하지 않은 링크 텍스트 값 = "어떤-꽃"확인란하지만 링크 텍스트에이 "모든 꽃입니다에게 있습니다 ".

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

와 아약스의 완성 기능에 변수 당신 checkedAttr 그런

에 밀어 : 그래서 모든 체크 박스의 레이블 텍스트를 선택해야합니다 그것을

$('.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

발견! 사이드 코드를 수정해야했지만 그는 지금 신세가 된 신사이자 학자입니다! 여러 개의 체크 박스가 조사 할 수 있습니다 (당신이 두 번째 그림에서와 같이) 모든 게시물에 강조 될 경우

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