JQuery код для простого onClick не работает, что я пропускаю?

0

Я новичок в jQuery, но я думал, что это будет достаточно просто, чтобы добавить onClick.

Но по какой-то причине он не работает. Я думаю, что это что-то малое, что я пропускаю. Кроме того, я бы хотел, чтобы div-1 медленно исчезал, поэтому он не сразу появляется сразу. Но по какой-то причине я даже не могу заставить шоу работать.

Вот мой html:

    <button id="button-1" style="height: 50px; 
width: 50px; background: red;">Click Me!</button>

    <div id="div-1" style="height: 400px; 
 width: 400px; background: blue; visibility: hidden;"></div>

и jQuery

jQuery('#button-1').onClick(){
    jQuery('#div-1').show();
}

Вот скрипка http://jsfiddle.net/2wsHd/

  • 0
    jQuery('#button-1').on("click", function() { ... }
Теги:
event-handling

6 ответов

1
Лучший ответ

У вас неправильный синтаксис для привязки события клика, используйте display:none вместо visibility:hidden. Поскольку функция show и hide использует свойство отображения, но не свойство видимости.

Демо-версия

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

Если вы хотите использовать свойство видимости, тогда не используйте show and hide довольно заданное свойство.

Демо-версия

jQuery('#button-1').click(function(){
    document.getElementById('div-1').style.visibility = 'visible';
});

Вы можете выбирать между этими двумя в соответствии с вашими потребностями. Этот пост поможет вам решить, к кому идти.

Свойство видимости только указывает браузеру, показывать ли элемент или нет. Это либо видимое (вы можете видеть), либо невидимое (скрытое - вы не можете его увидеть).

Свойство отображения сообщает браузеру, как рисовать и показывать элемент, если вообще - должен ли он отображаться как встроенный элемент (то есть он течет с текстом и другими встроенными элементами) или элемент уровня блока (то есть он имеет высоту и свойства ширины, которые вы можете установить, плавающие и т.д.) и некоторые другие (таблица, таблица-строка, таблица-ячейка, flex и т.д.), ссылка.

Поделиться
1

используйте функцию click() вместо функции OnClick() для функции jquery.

Использовать display: none вместо видимости: hidden

Попробуйте следующее: http://jsfiddle.net/2wsHd/14/ http://jsfiddle.net/2wsHd/15/

$('#button-1').click(function(){
    $('#div-1').fadeIn('slow');
})

ИЛИ нужно показать и скрыть, используя переключатель

$('#button-1').click(function(){
    $('#div-1').toggle('slow');
})
Поделиться
1

попробуйте что-то подобное, FIDDLE

HTML

<div id="div-1" style="height: 400px; width: 400px; background: blue; display:none;"></div>

Javascript

$(function(){
    jQuery('#button-1').click(function () {
        jQuery('#div-1').fadeIn("slow")
    })
})
Поделиться
1

использование дисплея: нет;

<button id="button-1" style="height: 50px; width: 50px; background: red;">Click Me!</button>
<div id="div-1" style="height: 400px; width: 400px; background: blue; display: none;"></div>

и ваш JQuery:

$(function() { //on document ready
    $( "#button-1" ).click(function() { //when #button-1 is clicked
        $('#div-1').show(); //show #div-1
    }); //end of click
}); //end of document ready

и заставить его исчезать, изменить

$('#div-1').show();

в

$('#div-1').fadeIn(1000);

http://jsfiddle.net/2wsHd/13/

Поделиться
1

Удалить visibility: hidden; div id div-1 и установить display:none

http://jsfiddle.net/2wsHd/3/

$('#button-1').on('click',function(){
    $('#div-1').show();
});
Поделиться
0

Использовать это:

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

Для обработки затухания. Используйте это:

jQuery('#button-1').click(function(){
    jQuery('#div-1').fadeIn(1000);
});
Поделиться
  • 0
    Вы проверили HTML? также проблема заключается в «видимости: скрыто»; div нужно заменить на display: none;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню