javascript - 如果父 div hasClass() 则显示跨度

Question

我正在用这个问题折磨自己。我不知道在做什么。这很简单，但就是行不通。当 div 有一个 class 时，我想显示一个 span 元素。是的，很基本，但我无法让它工作。

这是我的 HTML 类 add-product

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
    <span class="arrow">Testing</span>
</div>

这是 JavaScript

$(document).ready(function($){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").show();
    } else { 
        $(".arrow").hide();
    }
});

这是 .arrow 的 CSS

.arrow {
    display: none;
    width: 0; height: 0;
    line-height: 0;
    border-right: 16px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 60px;
    right: 0;
    position: absolute;
}

我试过什么，添加一个 find(span) 并添加 else if:

$(document).ready(function(){
    if ($("#ot-pr").hasClass('add-product')){
        $(".arrow").find('span').show();
    } else if { 
        $(".arrow").hide();
    }
});

单独或一起都不起作用。为什么这不起作用。这应该是基本的吧？!我没有收到任何控制台错误，并且 jQuery.js 已添加到页面中。所有其他脚本都可以正常工作。

Answer 1

这里不需要JS，只用CSS就可以实现:

.arrow {
  display: none;    
  /* simplified CSS for the example */
}
div.add-product .arrow {
  display: block;
}

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">arrow 1</span>
</div>

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">arrow 2</span>
</div>

<!-- not visible -->
<div id="ot-pr" class="status-publish has-post-thumbnail hentry">
  <span class="arrow">arrow 3</span>
</div>