所以我现在有了这个并且它可以工作,但我想知道在我编写移动网站时是否有最佳的编写方式,以及性能是否是一件大事。
想想在元素下滑动(切换)的工具提示,我在页面上还有大约 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);
});
最佳答案
一些建议:
- 使用 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');
});
});
祝你好运!
关于jQuery 在焦点/模糊上切换同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5225110/