jQuery在焦点/模糊上切换同级 [英] jQuery toggle sibling on focus/blur

问题描述

所以我现在有了它并且可以工作，但是我想知道在编写移动网站时是否存在一种最佳的编写方式以及性能方面的优势.

So I have this now and it works, but I wanted to know if there is an optimal way of writing this as I writing a mobile site and performance if a big thing.

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

Think tool-tip that slides down (toggles) under the element, I also have about 30 tool tip divs on the page as this will be for multiple elements

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

HTML for mobile-tool-tip function

<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进行编码

Have been using this (Thanks Hunter) to toggle elements but cant get it to work with the next() and I don't want to code each tool tip div by hand

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

推荐答案

一些建议:

• 节省几毫秒的时间，用CSS隐藏.mobile-tool-tip元素.
• 将事件附加到父div.找到父元素比找到同级元素要快.
• 当您正在寻找next或prev元素时，这是一个特定的元素，我总是建议使用`nextAll(.mobile-tool-tip")
• 您正在花费时间查找$(this).prev().不要做两次. jQuery中的许多函数都返回对上一次查询的引用，这使您可以链接调用(类似于$(".anElement").hide().remove()).利用它来节省时间.
• 对focus采取行动，对blur采取其他行动时，请使用确定性方法隐藏/显示或启用/禁用元素.这样可以确保您不会错过任何事件或特殊情况，并且可以防止与之相关的任何错误.

• Save a few milliseconds hiding .mobile-tool-tip elements with CSS.
• Attach the event to the parent div. It's faster to find the parent element than find a siblings.
• When you're looking for next or prev elements, and it's an specific element, I always suggest to use `nextAll(".mobile-tool-tip")
• You're consuming time finding $(this).prev(). Don't do it twice. A lot of functions in jQuery returns a reference to the last query made, this is what enables you to chain calls (something like $(".anElement").hide().remove()). Make use of it to save time.
• When you have an action to focus and other to blur, use an deterministic method to hide/show or enable/disable elements. This'll ensure that you didn't miss any event or special occasion, and will prevent for any bug related to it.

所以:

$('.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');
    });

});

祝你好运！

这篇关于jQuery在焦点/模糊上切换同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！