使用jQuery从另一个文件中的元素获取数据值

时间:2019-04-05 00:21:31

标签: javascript jquery html

所以基本上,我在文件中有一些具有某些数据值的元素。我想使用这些数据值动态创建指向它们的链接,以键入 text href 等。

例如,我有两个div,分别为firstsecond。它们具有importance值,分别是“最重要”和“最不重要”。

我想使用JavaScript / jQuery创建指向它们的两个链接,短语为“这是最重要/最不重要的div的链接”。下面是一个无效的示例。

文件a.html(省略标题,如ofc):

<div id='first' data-importance='most important'>This is the first div.</div>

<div id='second' data-importance='least important'>This is the second div.</div>

文件b.html

<p><a class='makelink' data-linkto='first'></a></p>

<p><a class='makelink' data-linkto='second'></a></p>

$(`.makelink`).each( function(){
  var target = $(this).data('linkto');
  $(this).attr('href','b.html#' + target);
  var imp = $('b.html #' + target).data('importance'); 
  $(this).html('Link to the ' + imp + ' div');
});

但是什么也没发生。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:1)

您的代码似乎正确,除了选择器应放在引号内并且html()中生成的字符串格式不正确:

$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
  var target = $(this).data('linkto');
  $(this).attr('href','#' + target);
  var imp = $('#' + target).data('importance'); 
  $(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='first' data-importance='most important'>This is the first div.</div>

<div id='second' data-importance='least important'>This is the second div.</div>

<p><a class='makelink' data-linkto='first'></a></p>

<p><a class='makelink' data-linkto='second'></a></p>