我用这个击败自己。我不知道自己在做什么。它很简单,但它不起作用。我想在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;
}
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);
}
});
}
已添加到页面中。所有其他脚本都可以正常工作。
答案 0 :(得分:9)
这里不需要JS,你可以单独用CSS实现这个目的:
.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;
答案 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解决方案:
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;
答案 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并添加高度