在select元素内使用键盘和鼠标输入创建jQuery事件触发器

Question

好了，开始吧，

我正在尝试编写一个脚本，当用户键入或单击<select>元素中的<option id='blselect'>时，会触发一个显示隐藏元素的事件。如果单击任何其他<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);
});

希望这是足够的信息，让人们开始？如果你需要更多，请告诉我。

提前谢谢。

Answer 1

正如@Marnix建议的那样，即使在这里使用，.change()事件也是正确的。否则，您可能正在处理鼠标或键盘事件，而这些事件实际上并没有改变下拉列表中的值。

您可能想要向<select>添加一个ID，在这种情况下，代码将如下所示：

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);
    }
});

Answer 2

看一下.change()事件。这样，<select>标记中的每个更改都会被注册。查看jQuery page上的示例，了解它是如何工作的。

Answer 3

您可以先使用.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方法。这允许重用您的函数，并防止由于传递和重新定义匿名函数而导致的内存泄漏。