Question

如何根据数据属性加载文件？

出于某种原因，$（this）似乎不起作用。

body {
    margin: 0;
    padding: 0;
}

.html {
    width: calc(100% - 10px);
    height: 80px;
    margin: 10px;
    background: #f6f6f6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 
  class="html" 
  data-load-file="../index.html" 
  data-load-content=".icon_environment"></div>

<div class="html"></div>

while

Answer 1

该代码中的

this是窗口（全局对象）。我想你可能是因为它引用了具有data-*属性的元素。

您可能希望单独处理这些元素，因此最好的办法是找到它们并使用each循环播放它们，这样您就可以单独定位它们，并通过this引用来回拨您的回调每个人：

$('.html[data-load-file][data-load-content]').each(function() {
  var $this = $(this);
  $this.load($this.attr("data-load-file") + ' ' + $this.attr("data-load-content"));
});

或：

$('.html[data-load-file][data-load-content]').each(function() {
  $(this).load(this.getAttribute("data-load-file") + ' ' + this.getAttribute("data-load-content"));
});

找到包含类html的所有元素以及我们需要的两个data-*属性，分别循环遍历它们，并使用它们的属性来调用load。

生活在plunkr上：http://plnkr.co/edit/lzHBYxVSETvHzTt6l2KR?p=preview

附注：我将上述内容更改为使用attr而不是data，因为您没有使用data提供的功能进行任何指示。请注意，data 不是是data-*属性的访问者。它的数量越来越少。 Details

Answer 2

你的jQuery（this）没有引用你的div.html，它引用整个文档。

你需要用jQuery（'。html'）替换jQuery（this），或者获取每个div.html并制作一个封装，以确保jQuery（this）引用你的div.html。

当你没有div时，还要添加一个文件，以确保在页面加载之前没有执行。

jQuery(document).ready(function(){

  jQuery('.html[data-load-file]').each(function(){
    
    var loadFile = jQuery(this).data('load-file') ;
    console.log(loadFile) ;
    var loadContent = jQuery(this).data('load-content') ;
    console.log(loadContent) ;
  
    var load_url = loadFile + ' ' + loadContent ;
    console.log(load_url) ;
  
    jQuery(this).load(load_url);
    
  }) ;
    
}) ;

body {
margin: 0;
padding: 0;
}

.html {
width: calc(100% - 10px);
height: 80px;
margin: 10px;
background: #f6f6f6;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 
  class="html" 
  data-load-file="../index.html" 
  data-load-content=".icon_environment"></div>

<div class="html"></div>

如何根据数据属性加载文件？

2 个答案: