function $(selector) {

  var resultObject = {
    hide: function() {
      if (selector == this) {
        selector.style.visibility = "hidden";
      }

    }
  };

  return resultObject;
}
<input type="button" value="hide myself with my jquery " onclick="$(this).hide();" />


如何检查选择器是否为“this”,以便我可以隐藏他.. 请考虑我必须重建隐藏功能,因此我不允许使用任何 Jquery 功能...

最佳答案

您根本不需要与 this 进行比较,因为您希望它适用于您传递给 $ 的任何内容。只需省略 if :

function $(selector) {
    var resultObject = {
        hide: function () {
            selector.style.visibility = "hidden";
        }
    };
    return resultObject;
}
<input type="button" value="hide myself with my jquery " onclick="$(this).hide();" />


现在,如果您的选择器参数可能不是 DOM 元素,而是 CSS 选择器,那么您需要测试参数的数据类型。另请注意,CSS 选择器可以表示多个元素,因此如果您也想处理这种情况,则需要一个循环。

以下是如何实现此功能的示例:

function $(selector) {
    var nodes = typeof selector === "string"
        ? Array.from(document.querySelectorAll(selector))
        : [selector];
    var resultObject = {
        hide: function () {
            nodes.forEach(function (node) {
                node.style.visibility = "hidden";
            });
        }
    };
    return resultObject;
}
<input type="button" value="hide all divs with my jquery "
       onclick="$('div').hide();" />
<div>div 1</div>
<div>div 2</div>


下一个挑战是使这个可链接,您可以通过将所有必要的状态放入 resultObject 并在每个方法上返回它来实现:

function $(selector) {
    var resultObject = {
        nodes: typeof selector === "string"
                ? Array.from(document.querySelectorAll(selector))
                : [selector],
        hide: function () {
            resultObject.nodes.forEach(function (node) {
                node.style.visibility = "hidden";
            });
            return resultObject;
        },
        text: function (txt) {
            resultObject.nodes.forEach(function (node) {
                node.textContent = txt;
            });
            return resultObject;
        },
        color: function (colorCode) {
            resultObject.nodes.forEach(function (node) {
                node.style.color = colorCode;
            });
            return resultObject;
        }
    };
    return resultObject;
}
<input type="button" value="color and put text in divs with my jquery "
       onclick="$('div').color('red').text('clicked!');" />
<div>div 1</div>
<div>div 2</div>


这不是最优的,因为每次调用 $ 都会重新创建 resultObject。所以你可以考虑改进。然后应该有方法来过滤结果,在所选节点下面找到元素,......等等。

但是我们离题了。在不知不觉中,您实际上是在编写一个库。 ;-)

关于javascript - 我怎样才能隐藏 "this",我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41128769/

10-12 12:29
查看更多