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

Please allow me to ask a silly question about javascript function. I wonder if there's a way to call javascript function from the div. Without giving an id nor class.

请允许我问一个关于javascript函数的愚蠢问题。我想知道是否有办法从div调用javascript函数。没有给出身份或类别。

Function

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

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

Then I want to print the data from the parent div into its content. By doing something like this.

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

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

So I expect this div will filled with john/red. The reason is there will be a lot of div which is need to pass variable on it's own.

所以我希望这个div会充满john / red。原因是会有很多div需要自己传递变量。

4 个解决方案

#1

It will be better to use data() when you want to get data-* attributes :

当你想获得data- *属性时,最好使用data():

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

Then you could use the attribute selector like $('div[data-name]'). Else it will be better to attach an identifier id or a class to your element(s).

然后你可以像$('div [data-name]')一样使用属性选择器。否则,最好将标识符id或类附加到元素中。

$('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>

#2

You can do something like this and select all elements with the data-name attribute:

您可以执行以下操作并使用data-name属性选择所有元素:

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

N.B.: Adding a class and using that instead to select the elements is better for performance, as it can use better optimized functions.

N.B。:添加一个类并使用它来代替选择元素对性能更好,因为它可以使用更好的优化函数。

#3

This should do it:

这应该这样做:

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

#4

This accomplishes what you're trying to do:

这完成了你想要做的事情:

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

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

As the browser parses through the HTML, the "last" div will be the one containing the current script element, even if there are multiple divs.

当浏览器解析HTML时,“last”div将是包含当前脚本元素的div,即使有多个div也是如此。

Example:

<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>

That is not, however, the best approach.

然而,这不是最好的方法。

Instead, change the HTML of all the divs like this:

相反,更改所有div的HTML,如下所示:

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

Example:

$('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>