有条件地移动 html 元素

Question

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

我的想法是，如果我有一张返回的图片，我希望它与标题在同一行，并且标题向右移动（为左侧的 img 分配 space） .是否可以？

最好在 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://whosebug.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>

这显示了向您的标题添加图像 in/next 的几种方法之一。

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

如果这不能回答您的问题，那么您需要在 post 中添加更好的描述以及更多信息。也许是一个具有预期结果的 JSFiddle。

有条件地移动 html 元素

conditionally moving a html element

html

javascript

handlebars.js