如果href字符串包含隐藏父项

Question

如果div类是list-view和文章，则href包含字符串staticcards隐藏文章并显示带有href字符串listcards文章

如果div类是card-view和article，则href包含字符串listcards隐藏文章并显示带有href字符串staticcards文章

下面是代码，不起作用

 if ($(".cards-wrapper").hasClass("list-view")) { $('a[href*="staticcard"]').parent().hide(); $('a[href*="listcard"]').parent().show(); } else if ($(".cards-wrapper").hasClass("card-view")) { $('a[href*="staticcard"]').parent().show(); $('a[href*="listcard"]').parent().hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cards-wrapper list-view"> <article> <a href="xxxxx?staticcard">Static Card</a> </article> <article> <a href="xxxxx?listcard">List Card</a> </article> </div> 

Answer 1

模块化，清洁后再使用。

 var wrapper = document.getElementsByClassName("cards-wrapper")[0]; if (Array.from(wrapper.classList).indexOf("list-view") > 0) { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("staticcard")>1).map(q=>q.style="display:none;"); }else { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("listcard")>1).map(q=>q.style="display:none;"); } 

 <div class="cards-wrapper card-view"> <article> <a href="xxxxx?staticcard">Test 1</a> </article> <article> <a href="xxxxx?listcard">Test 2</a> </article> </div> 

 var wrapper = document.getElementsByClassName("cards-wrapper")[0]; if (Array.from(wrapper.classList).indexOf("list-view") > 0) { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("staticcard")>1).map(q=>q.style="display:none;"); }else { Array.from(wrapper.getElementsByTagName("a")).filter(e=>e.href.indexOf("listcard")>1).map(q=>q.style="display:none;"); } 

 <div class="cards-wrapper list-view"> <article> <a href="xxxxx?staticcard">Test 1</a> </article> <article> <a href="xxxxx?listcard">Test 2</a> </article> </div>