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

Question

So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text , href etc.

For example, I have two divs, id'ed first and second . They have importance values, respectively "most important" and "least important".

I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.

File a.html (ommiting headings and such, 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>

File 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');
});

However nothing happens. Any help is appreciated.

Answer 1

Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:

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