2015-07-15 2 views
4

У меня есть кнопки NEXT и PREVIOUS на моем экране. Когда страница изначально загружается, я хочу, чтобы кнопка Previous была скрыта, и как только пользователь нажимает кнопку «Далее», я хочу, чтобы кнопка «Предыдущий» (тег div был видимым). У меня есть свойство CSS для кнопки Previous, где я устанавливаю значение видимости в значение False. А также оператор if, где я проверяю, превышает ли счетчик страниц более 1, измените видимость navigationButtonTop на true. Он не работает. Что я делаю неправильно? .Как изменить видимость div css на видимый с помощью jQuery

$(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>

ответ

9

Во-первых, вы не закрыли оператор if, а navigationButtonTop - это класс, а не id.

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

как OP редактировал свой вопрос новый ответ был бы:

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

Спасибо Josh .. Я должен был использовать " «. вместо #. Это сработало для меня! :) –

+0

если он исправил вашу проблему, пожалуйста, отметьте как принято, так что, если другие люди на SO придут против этой проблемы, вы легко сможете найти ответ :) @HereToLearn_ –

+0

спасибо, что я сделал это @Josh :) –

0

Havde Вы пробовали $ ("# navigationButtonTop") шоу();

+0

Это именно то, что он сделал. – Ted

+0

почему вы ответили бы иначе на то, что он пробовал .. он использовал привязку css, поэтому исправьте его проблему, не предлагайте вещи, которые просто гадают. –

+0

Я сразу изменил свой комментарий – tichra

1

В вашем JS использовать ID (знак "#" перед именем селектора). Но в вашем CSS вы используете CLASS (знак точки перед именем селектора).

Попробуйте использовать «#» в обоих случаях (или точками соответственно).

0

Прежде всего, код того, как вы на самом деле хотите вызвать событие, было бы приятно узнать. Может быть, триггер не работает вообще?

Дополнительно вы обращались по-разному. В CSS navigationButtonTop есть класс (см. «.»), А в JS это id (см. «#»). Это преступник в вашем собственном коде? Если нет, я предположим, что это еще один идентификатор ...

Для большей читаемости попробуйте переместить visibility: hidden в дополнительный скрытый класс. Таким образом, вы можете просто вызвать:

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

А вы HTML добавить класс hidden к кнопке

#navigationButtonTop.hidden { visibility:hidden; } 

Или сделать это с помощью JavaScript:

jQuery(document).ready(function($) { 
    $("#navigationButtonTop").addClass('hidden'); 
}) 
Смежные вопросы