父div为hasClass()时显示跨度

时间:2016-08-03 12:34:22

标签: javascript jquery html css

我用这个击败自己。我不知道自己在做什么。它很简单,但它不起作用。我想在divclass时显示add-product项。是的,基本的,但是我无法让它发挥作用。

以下是我的HTML <div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product"> <span class="arrow">Testing</span> </div>

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

这是JavaScript

.arrow

以下是.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; }

的CSS
find(span)

我尝试了什么,添加else if并添加$(document).ready(function(){ if ($("#ot-pr").hasClass('add-product')){ $(".arrow").find('span').show(); } else if { $(".arrow").hide(); } });

jQuery.js

无论是分开还是在一起都不起作用。为什么这不起作用。这应该是基本的吗?!我没有收到控制台错误,并且function updateData(x,y){ var post_data= {}; post_data[x]=y; // dynamic property $.ajax({ type: 'POST', url: 'myupdate.php', data: post_data, success: function(data){ $("#resultdiv").html(data); } }); } 已添加到页面中。所有其他脚本都可以正常工作。

5 个答案:

答案 0 :(得分:9)

这里不需要JS,你可以单独用CSS实现这个目的:

&#13;
&#13;
.arrow {
  display: none;    
  /* simplified CSS for the example */
}
div.add-product .arrow {
  display: block;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我认为不需要为此编写javascript,您只能通过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;
}

div.add-product > span.arrow
{
   display: block !important;
}

答案 2 :(得分:1)

$(document).ready(function(){

  if($("#ot-pr").hasClass('add-product') == true){
    $(".arrow").css("display","block");
  }
  else { 
    $(".arrow").css("display","none");
    }
});

答案 3 :(得分:1)

jQuery解决方案:

&#13;
&#13;
var $arrow = $('.arrow'),
    $otPr = $('#ot-pr');

$otPr.hasClass('add-product')
  ? $arrow.show()
  : $arrow.hide();
&#13;
.arrow {
  display: block;
  /* ... */
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ot-pr" class="status-publish has-post-thumbnail hentry add-product">
  <span class="arrow">Some text</span>
</div>
&#13;
&#13;
&#13;

答案 4 :(得分:-1)

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

只需添加display:block并添加高度