Question

我试图看看是否可以使用JS有条件地移动html元素？

我的想法是，如果我有一个返回的图像，我希望它与标题位于同一行，标题向右移动（为左边的img分配空间）。可能吗？

最好是在handlebars辅助方法还是标准的js文件中完成？

我正在思考

的内容

//thumbnail conditional moving title if exists
if(results.thumbnail != 0) {
    //do something here
}

Answer 1

我不确定我是否理解你的问题。

这有点朝正确的方向发展吗？

无论如何，您的信息非常模糊。我认为这个脚本中的逻辑在某种程度上是正确的方向。根据您的需要进行修改。

// DUMMY RESPONSE FROM "API"
var response = [{
  title: "Hello World, with image",
  image: "http://placehold.it/200/200"
}, {
  title: "Hello World, no image",
  image: ""
}]


//JUST TO VARY THE RESULT A BIT, SELECT A RANDOM POST FROM THE RESPONSE.
var post = response[getRandomInt(0, 1)];

// SELECT THE FIRST (AND IN THIS SCRIPT, ONLY) H1 TAG
var elem = document.getElementsByTagName("h1")[0];

// SET THE TEXT OF THE H1 TAG TO BE EQUAL THE POST TITLE
elem.innerText = post.title;

// IF THE "IMAGE" PROPERTY OF THE RESPONSE CONTAINS A STRING/VALUE THAT HAS
// A LENGTH, BIGGER THEN 0 - WE ASSUME THERE IS A LINK IN THERE TO THE IMG.
if (post.image.length > 0) {

  // ADD THE IMG HTML, AND APPEND THE CURRENT TEXT OF THE ELEMENT
  // THIS ALL HAPPENS INSIDE THE "H1" ELEMENT. 

  elem.innerHTML = '<img src="' + post.image + '" /> ' + elem.innerText;
}



/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 * Credits: http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range
 */
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

<h1></h1>

这显示了在标题中/旁边添加图像的几种方法之一。

单击“运行”几次以显示它对没有图像的响应的反应。

如果这不能回答您的问题，那么您需要在帖子中提供更好的描述，并提供更多信息。也许是一个有预期结果的JSFiddle。

有条件地移动html元素

1 个答案: