如何從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>