如何从div内部调用javascript函数？

Question

请允许我问一个关于javascript函数的愚蠢问题。 我想知道是否有一种方法可以从div调用javascript函数。 没有给出id或class。

功能

function callTest(){
    name=$(this).attr('data-name');
    clr=$(this).attr('data-clr');

    $(this).html(name+'/'+clr);
}

然后，我想将父div中的数据打印到其内容中。 通过做这样的事情。

<div data-name="john" data-clr="red">
    <script>callTest()</script>
</div>

因此，我希望这个div会充满john/red 。 原因是将有很多div本身需要传递变量。

Answer 1

当您想获取data- *属性时，最好使用data() ：

var name = $(this).data('name');
var clr  = $(this).data('clr');

然后，您可以使用$('div[data-name]')类的属性选择器。 否则，最好在您的元素上附加一个标识符id或一个class 。

 $('div[data-name]').each(function() { var name = $(this).data('name'); var clr = $(this).data('clr'); $(this).html(name + '/' + clr); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-name="john" data-clr="red"> </div> 

Answer 2

您可以执行以下操作，并选择所有具有data-name属性的元素：

$('[data-name]').each(function(){
    let name = $(this).attr('data-name');
    let clr  = $(this).attr('data-clr');
    $(this).html(name+'/'+clr);
});

注意：添加一个类并使用它来选择元素会提高性能，因为它可以使用更好的优化功能。

Answer 3

应该这样做：

$('[data-name]').each(function(){
  var name = $(this).attr('data-name');
  var color =$(this).attr('data-clr');
  $(this).text(name + '/' + color);
});

Answer 4

这完成了您要执行的操作：

function callTest() {
  var $div = $('div:last'),
      name = $div.data('name'),
      clr = $div.data('clr');

  document.write(name + '/' + clr);
}

当浏览器通过HTML进行解析时，即使存在多个div ，“最后一个” div也将包含当前脚本元素。

例：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function callTest() { var $div = $('div:last'), name = $div.data('name'), clr = $div.data('clr'); document.write(name + '/' + clr); } </script> <div data-name="john" data-clr="red"> <script>callTest()</script> </div> <div data-name="mary" data-clr="green"> <script>callTest()</script> </div> 

但是，这不是最佳方法。

相反，请像这样更改所有div的HTML：

$('div[data-name]').html(function() {
  return $(this).data('name') + '/' + $(this).data('clr');
});

例：

 $('div[data-name]').html(function() { return $(this).data('name') + '/' + $(this).data('clr'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-name="john" data-clr="red"></div> <div data-name="mary" data-clr="green"></div>