如何使用jQuery将div css的可见性更改为可见

Question

我的屏幕上有NEXT和PREVIOUS按钮.当页面最初加载时我希望隐藏上一个按钮,一旦用户单击下一步按钮我想要上一个按钮(div标签可见).我有一个上一个按钮的CSS属性,我将可见性值设置为False.还有一个if语句,我检查页面计数器是否大于1然后将navigationButtonTop的可见性更改为true.它不起作用..我做错了什么!？

$(function() {
  $("#navigationButtonTop").css("visibility", "visible");
});

div.navigationButtonTop {
  visibility: hidden;
  height: 100px;
  width: 100px;
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationButtonTop"></div>

Answer 1

首先你没有关闭你的if语句,并且navigationButtonTop是一个不是id的类试试这个.

if (that.get("pageCounter") >= 1) {
     $(".navigationButtonTop").css("visibility", "visible");
}

由于OP编辑了他的问题,新答案将是:

$(function() {
  $(".navigationButtonTop").css("visibility", "visible");
});

Answer 2

首先，很高兴知道您实际上希望如何触发事件的代码。也许触发器根本不起作用？

另外你的说法不同。在 CSS 中navigationButtonTop是一个类（参见“.”），在 JS 中它是一个 id（参见“#”）。这是您实际代码中的罪魁祸首吗？如果不是，我会进一步假设它是一个 id...

为了提高可读性，请尝试将您的类移至visibility: hidden额外的隐藏类。所以你只需触发：

$("#navigationButtonBottom").on('click', function() {
  $("#navigationButtonTop").removeClass('hidden');
});

然后在 HTML 中将类添加hidden到按钮中

#navigationButtonTop.hidden { visibility:hidden; }

或者使用 JavaScript 来实现：

jQuery(document).ready( function($) {
  $("#navigationButtonTop").addClass('hidden');
})