Question

我有一个onclick函数

$('.modal-trigger').on('click', function() {         
  $('#'+$(this).data('modal')).show();
  calc();  
})

<a class="modal-trigger" data-modal="ft-modal">Link</a>
<div id="ft-modal"></div>

我想在内部添加calc()函数

function calc() {
  var tt = document.getElementById('#'+this.getAttribute('data-modal')).document.getElementsByClassName("name-line")[0]; 
}

第二个功能是 onclick 的外部（上方），我的问题是我无法弄清楚如何在{{ 1}}，然后按类名获取与纯JS上的类匹配的第一个。

而且我认为我不知道如何针对这种特殊情况正确使用<div>。

Answer 1

您可以使用this将calc传递给.call函数：

calc.call(this);

此时calc函数不需要更改。

Answer 2

如评论中所建议...

$('.modal-trigger').on('click', function() {         
    ...
    calc(this);  
});

function calc(ele) {
    ...
}

在jQuery脚本中使用document.getElementById是可疑的；

最好使用$(ele).data('modal')来获取数据属性。

两种方法都可以工作，但是可读性会提高

...这就是为什么它被称为“少写，多做”。

Answer 3

您必须将 this 对象传递给函数，以便可以在函数内部引用该对象。您可以使用jQuery简化代码：

$('.modal-trigger').on('click', function() {         
  $('#'+$(this).data('modal')).show();
  calc(this); // pass this here 
})

function calc(el) {
  var tt = $('#'+$(el).data('modal')).find('.name-line')[0];
  console.log(tt); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="modal-trigger" data-modal="ft-modal">Link</a>
<div id="ft-modal">
  <span class="name-line"></span>
</div>

如何在父JS之外的子函数中使用THIS

3 个答案: