如何通过使用javascript保护类名来在div列表上应用css样式

Question

我得到了具有 2 种类名编码和设计的 li 标签列表。我想要的结果是，如果 li 是设计后链接是显示块，而站点链接是显示无，而编码类名将产生相反的效果。我将 li 类存储到数组中，然后条件将循环以找出哪些 li 标签具有设计和编码的类名。结果是条件仅读取数组的最后一个元素。你能帮我这个吗...对不起，不好用英语提问。

.HTML

<li class="Design">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>
<li class="Design">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>
<li class="Coding">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>
var workArray = [];
var $work = jQuery('.slide-container li');
var $workClass = $work.attr('class');
$work.each(function(){
        workArray.push($workClass);
        for(i = 0; i < workArray.length; i++){
            if(jQuery(this).hasClass('Design')){
                jQuery('.post-link').css('display','block');
            }else{  
                jQuery('.post-link').css('display','none');     
            }
        }
    });

Answer 1

css：

.Design .site-link {
   display: none;
}
.Coding .post-link {
   display: none;
}

并让浏览器自行执行数组/遍历推送/弹出;)

Answer 2

只需使用相关的选择器和方法：

$('.Design .post-link').show(); // useless if not hidden by default
$('.Coding .post-link').hide();

当然，你可以设置CSS规则：

.Design .post-link { display: block;}
.Coding .post-link { display: none;}

听起来你把它复杂化了。