jQuery 在焦点/模糊上切换同级

Question

所以我现在有了这个并且它可以工作，但我想知道在我编写移动网站时是否有最佳的编写方式，以及性能是否是一件大事。

想想在元素下滑动（切换）的工具提示，我在页面上还有大约 30 个工具提示 div，因为这将用于多个元素

JS：

$('.mobile-tool-tip').each(function() { 
    $(this).hide();                         
    $(this).prev().focus(function() {
        $(this).next().slideToggle('fast');
    });
    $(this).prev().blur(function() {                    
        $(this).next().slideToggle('fast');
    });
});

移动工具提示功能的 HTML

<div data-role="fieldcontain">
    <input type="text" name="telephone" id="telephone" placeholder="Phone Number*" />
    <div class="mobile-tool-tip" id="telephone_tip">Valid format <strong>999-999-9999</strong>. Please include the area code.</div>
</div>

一直在使用这个（感谢 Hunter) 来切换元素，但无法让它与 next() 一起使用，而且我不想对每个工具提示 div 进行编码手工

$("[name=field_name]").change(function() {
    var show = $(this).val();
    $("#hidden_div").toggle(show);
});

Answer 1

一些建议：

• 使用 CSS 隐藏 .mobile-tool-tip 元素可以节省几毫秒的时间。
• 将事件附加到父 div。查找父元素比查找兄弟元素更快。
• 当您查找 next 或 prev 元素并且它是特定元素时，我始终建议使用 `nextAll(".mobile-tool-tip")
• You'查找 $(this).prev() 非常耗时。不要做两次。 jQuery 中的许多函数都会返回对最后一次查询的引用，这使您能够链接调用（类似于 $(".anElement").hide().remove()）。利用它来节省时间。
• 当您有一个聚焦操作和其他模糊操作时，请使用确定性方法来隐藏/显示或启用/禁用元素。这将确保您不会错过任何活动或特殊场合，并防止出现任何与之相关的错误。

所以：

$('.mobile-tool-tip').each(function() { 
    $(this).prev().focus(function() {
        $(this).nextAll(".mobile-tool-tip").slideDown('fast');
    }).blur(function() {                    
        $(this).nextAll(".mobile-tool-tip").slideUp('fast');
    });

}）;

祝你好运！

Answer 2

一些简单的想法。

1. 您可以缓存选择器并将调用链接在一起，以避免 dom 上的任何迭代。
2. 您还可以在焦点和模糊函数中创建提示的闭包，这将不会导致额外的 dom 迭代。

所以你最终可能会得到这样的结果...

$('.mobile-tool-tip').each(function() {
    var $tip = $(this);
    $tip.hide().prev().focus(function() {
        $tip.slideToggle('fast');
    }).blur(function() {                    
        $tip.slideToggle('fast');
    });
});

jsfiddle 在触发时显示出轻微的性能增益带有关闭的事件。

Answer 3

您可以尝试使用变量来保存 $(this).next() 元素，从而组合对 DOM 的一些调用。根据文件的大小，这可以节省大量时间，而不必进行两次调用。

var nextElement = $(this).next();
$(this).prev().blur(function(){
$(nextElement).slideToggle();
}