Question

我用这个击败自己。我不知道自己在做什么。它很简单，但它不起作用。我想在div有class时显示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); } }); }已添加到页面中。所有其他脚本都可以正常工作。

Answer 1

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

＆＃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;

Answer 2

我认为不需要为此编写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;
}

Answer 3

$(document).ready(function(){

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

Answer 4

jQuery解决方案：

＆＃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;

Answer 5

用

替换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并添加高度

父div为hasClass（）时显示跨度

5 个答案: