Question

需要了解映射屏幕上所有字段的最佳方法（div，imgs，input，dropdows，tables等等）。我有以下代码：

$(document).ready(function () {

    $('body > *').mouseenter(function () {
        $('*').removeClass('objectFocus');
        $(this).addClass('objectFocus');
    });

    $('body > *').mouseleave(function () {
        $(this).removeClass('objectFocus');
    });

    $('*').on('click', '.objectFocus', function () {
        alert($(this).attr('id'));
        $(this).removeClass('objectFocus');
    });

});

但我面临div或表内对象的问题。我知道可以使用功能.children()或.parent()。我想知道最好的方法，这是一个通用的表单，我可以从文本框访问div，它是相同的。

我在jsFiddle中有这个：Not working as expected

当我们将鼠标悬停在屏幕上的对象上时，会在其上添加红色边框...但是当我们在div中插入对象时，遗憾的是它只会增强父div。< / p>

显然可行：Expected Result (but not including divs)

有人有任何解决方案吗？也许使用jQuery.map()我们得到结果？

提前谢谢。

Answer 1

$(document).ready(function () {
  $('body').on('mouseenter','input',function() {
    $(this).toggleClass('objectFocus');
  });
  $('body').on('click','.objectFocus',function() {
    alert($(this).attr('id'));
    $(this).removeClass('objectFocus');
  });
});

Answer 2

/* js */

 $('body').on('focus','input', function () {
    $(this).addClass('objectFocus');
    console.log($(this).attr('id'));
});

$('body').on('blur','input', function () {
    $(this).removeClass('objectFocus');
});

/* css */

.objectFocus {
    border: 1px solid red;
    outline: none!important;
}

使用jQuery映射字段屏幕（ASP.NET WebForms）

2 个答案: