#jquery #html
#jquery #HTML
Вопрос:
Хорошо, вот так,
Я пытаюсь написать скрипт, который, когда пользователь нажимает на <option id='blselect'> внутри <select> элемента, запускает событие, которое показывает скрытый элемент. Если щелкнуть по любому из других <option class='unselect'> , вышеупомянутый элемент будет скрыт.
Я добился того, что скрипт отлично работал в отношении пользовательских кликов, но проблема в том, что пользователь должен был использовать клавиатуру для работы с формой.
Событие, которое требуется запустить для <option id='blselect'> отображения, является таким;
$("#blselect").click(function() {
$("#hidden").animate({
opacity: 'show',
width: "100%"
}, 1500);
});
Событие, которое требуется запустить для скрытия, как таковое;
$(".unselect").click(function() {
$("#hidden").animate({
opacity: 'hide'
}, 1500);
});
Это показывает скрытый элемент CSS и, конечно, анимирует визуальный элемент.
Короче говоря, решение, которое охватывает ввод с клавиатуры и мыши, когда пользователь либо фокусируется на <option id='blselect'> или <option class='unselect'> элементах.
<li>
<select>
<option class="unselect" selected>Please choose an option..</option>
<option id="blselect">John</option>
<option class="unselect">Mike</option>
<option class="unselect">Barry</option>
<option class="unselect">Sally</option>
<option class="unselect">Gertrude</option>
<option class="unselect">Jill</option>
</select>
</li>
<li id="hidden">
<input type="text">
</li>
$("#blselect").click(function() {
$("#hidden").animate({
opacity: 'show',
width: "100%"
}, 1500);
});
$(".unselect").click(function() {
$("#hidden").animate({
opacity: 'hide'
}, 1500);
});
Надеюсь, этой информации достаточно, чтобы люди начали? пожалуйста, дайте мне знать, если вам нужно больше.
Заранее спасибо.
Ответ №1:
Взгляните на .change() событие. Таким образом регистрируется каждое изменение в <select> теге. Посмотрите на примеры на странице jQuery, чтобы увидеть, как это работает.
Комментарии:
1. Да, я взглянул на событие .change, но замена его на событие .click не сработала, теперь я предполагаю, что способ, которым вы бы написали функцию .change, отличается от способа .click?
2. Следует отметить, что IE не запускает событие change, пока не произойдет
blur()событие. Исправление заключается в том, чтобы сделать что-то вроде этого:$('select').click(function(){this.focus();this.blur();});3. @sholsinger, также для
<select>? Из jQuery:For select boxes, checkboxes, and radio buttons, the event is fired immediately.У вас есть ссылка для меня по этому поводу?4. Вы правы, это не влияет на
<select>элементы одинаково. Однако в IE и Operachange()запускается каждый раз, когда вы используете клавиатуру для изменения значения , тогда как вы могли бы ожидать, что это сработает только при подтверждении изменения клавишами tab или enter. ( Как это происходит с FF, Chrome и Safari )5. Тем не менее, вы можете использовать
click()обработчик событий для<option>элементов, если хотите настроить таргетинг на них вместо<select>
Ответ №2:
Вы могли бы использовать .focus() и затем .blur()
function animateVisualIn(){
$("#hidden").animate({
opacity: 'show',
width: "100%"
}, 1500);
}
function animateVisualOut(){
$("#hidden").animate({
opacity: 'hide'
}, 1500);
}
$('#blselect, .unselect').focus(animateVisualIn).blur(animateVisualOut);
Возможно, я пропустил отметку в этом. Но я думаю, что мой пример показывает хорошую практику, которую вы должны привыкнуть использовать. Определите функции таким образом, чтобы их можно было повторно использовать в вашем коде. Затем просто передайте имя функции в метод jQuery, который принимает функцию в качестве аргумента. Это позволяет повторно использовать ваши функции и предотвращает утечку памяти из-за обхода и переопределения анонимных функций.
Комментарии:
1. Единственная проблема, которую я обнаружил при попытке события .focus, заключается в том, что рассматриваемый элемент является <select> .focus срабатывает только при вызове его в качестве селектора и не будет работать при вызове одного из его дочерних элементов. поэтому мне пришлось бы изменить #blselect на select, и тогда скрипт работает, даже когда вы пытаетесь щелкнуть по элементу <select>.
2. Очень хорошие моменты в ваших отредактированных комментариях, я сделаю это на будущее.
Ответ №3:
Как предположил @Marnix, .change() событие является правильным даже для использования здесь. В противном случае вы могли бы обрабатывать события мыши или клавиатуры, которые на самом деле не изменили значение в выпадающем списке.
Вероятно, вы захотите добавить идентификатор к <select> , и в этом случае код будет выглядеть следующим образом:
var $hidden = $('#hidden');
$('#my-select-id').change(function ()
{
var $option = $(this.options[this.selectedIndex]);
if ($option.is('#blselect'))
{
$hidden.fadeIn(1500);
}
else if ($option.is('.unselect'))
{
$hidden.fadeOut(1500);
}
});
Комментарии:
1. идеальное решение, мистер Болл 🙂 Надеюсь, я не слишком наглый и спрашиваю, возможно ли вообще, чтобы событие .change обрабатывало нажатия клавиш как изменение, а не последующее нажатие клавиши и клавишу ввода / возврата?
2.Не слишком изящно, но и невозможно. Событие change срабатывает при
<select>изменениях, а при навигации с клавиатуры этого не происходит, пока не нажата клавиша enter. Однако имеет смысл, чтобы это было именно так.
Ответ №4:
Вы также можете использовать метод jQuery .keyup (обработчик) для выполнения обработчика.
function show() {
}
function hide() {
}
$("#blselect").click(hide);
$("#blselect").keyup(hide);
Комментарии:
1. Только что попробовал ваш пример, к сожалению, событие .keyup не будет работать для элемента <select>, есть другие идеи?