Question

嘿大家这是第一次在这里问一个问题。所以我们走了。我有一个json返回的ajax请求。我现在尝试采取响应并动态创建配方标题，但也使用响应数据创建一个href。

$( window ).load( function() {
$.get({
  url: window.location.href + ".json"
}).success( function( response ) {
  console.log( response );
  let $title = $( ".js-title" );
  let reviewCount = 0;

  while( reviewCount < $title.length ) {
    let recipe_title = response[reviewCount].recipe.title;
    let href = response[reviewCount].location.href;

    $title[reviewCount].prepend( `<a>${ recipe_title }</a>` ).attr('href', `${ href }`);
    reviewCount++;
  }
});

}）;

我无法弄清楚事情的某些部分。

Answer 1

可以在模板中添加href（创建元素时），不需要使用attr函数。

支持上述声明的示例代码段：

function prepend() {
  let title = 'something';
  let href = 'something/else'
  $('div').append(`<a href='${href}'>${title}</a>`)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="prepend()">Click here</button>
<div></div>

向用户表明你做了什么错误：

毫无疑问，jQuery prepend方法是可链接的，但它将返回它所应用的元素。因此，如果您打开检查器，您应该会在$title[reviewCount]元素中看到href被添加。

要做到这一点，你需要构建一个元素，然后将其添加到前面。

示例摘录。

function prepend() {
  let title = 'something';
  let href = 'something/else';
  $('div').prepend($('<a></a>').text(`${title}`).attr('href', `${href}`))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="prepend()">Click here</button>
<div></div>

预先插入特定元素：

我们需要使用Jquery的eq方法，这也是可以理解的。

使用：

$title.eq(reviewCount).prepend($('<a>').text(`${ response[reviewCount].recipe.title }`).attr('href', http: //localhost:3000/recipes/`${recipe_id}`));

如何在html中使用es6模板标记href

1 个答案: