Question

我有这个HTML：

<div class="col-md-10 col-md-offset-1" id="content-datas" data-load-content="rooms-list"></div>

这个JS：

if($('[data-load-content]').length) {
    var datas = $(this).attr('data-load-content');
    alert(datas);
    $('#content-datas').load('assets/php/ajax/' + datas + '.php');
}

你能告诉我为什么datas = 'undefined'？

Answer 1

问题在于，您的代码中的this会引用window（假设它不在其他任何范围内）。要使this引用具有data属性的元素，您可以使用each()遍历所有这些元素。另请注意，您应该使用data()通过jQuery检索数据属性值。

$('[data-load-content]').each(function() {
    var datas = $(this).data('load-content');
    alert(datas);
    $('#content-datas').load('assets/php/ajax/' + datas + '.php');
});

Working example

Answer 2

您正在引用this，在这种情况下，它指的是窗口对象，而不是指向的元素。所以相反，尝试抓住对元素的引用，如下所示：

＆＃13;

var $elem = $('[data-load-content]'); // grab reference here

if ($elem.length) { // check the reference's length
    var datas = $elem.attr('data-load-content'); // use the reference once again
    alert(datas);
    $('#content-datas').load('assets/php/ajax/' + datas + '.php');
}

＆＃13;

<div class="col-md-10 col-md-offset-1" id="content-datas" data-load-content="rooms-list"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

我希望有所帮助！

如果页面中存在元素，则获取数据属性

2 个答案: