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();" />

Как можно проверить, является ли селектор «этим», чтобы я мог скрыть его .. Пожалуйста, учтите, что мне нужно пересобрать функцию скрытия, чтобы мне не разрешалось использовать какие-либо функции Jquery ...

4
user7292717 13 Дек 2016 в 22:09

4 ответа

Лучший ответ

Вам вообще не нужно сравнивать с 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 при каждом вызове $ . Таким образом, вы можете посмотреть на улучшение этого. Тогда должны быть способы отфильтровать результаты, найти элементы под выбранными узлами и т. Д.

Но мы отвлеклись. Прежде чем вы это знаете, вы действительно пишете библиотеку. ;-)

9
trincot 13 Дек 2016 в 21:32

ОТ, так как другие уже указывали, что вы, кажется, (чрезмерно) усложняете вещи,
другой подход к вашему коду:

// a utility ...
var style = (prop, value) => node => (node && node.style[prop] = value, node);
// ... in action ...
var hide = style("visibility", "hidden");
<!-- ... and a possible way to use it -->
<input type="button" value="hide myself with my jquery " onclick="hide(this)" />
1
Thomas 13 Дек 2016 в 19:37

Это здесь указывает на объект окна.

Вы можете изменить сферу этого, используя вызов / применить

Проверьте следующий фрагмент

function $(selector) {


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

  return resultObject;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Надеюсь, это поможет

4
Geeky 13 Дек 2016 в 19:24

Похоже, ты слишком усложняешь вещи. Это может быть достигнуто простым присвоением вашей кнопке класса:

  <input type="button" value="hide myself with my jquery " class="hideme"/>

И затем создание обработчика кликов в вашем JS:

$('.hideme').click(function(){
    $(this).hide();
});
2
Fueled By Coffee 13 Дек 2016 в 19:17