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")
• 您正在花费时间查找 $(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');
    });

});

祝你好运!