2016-09-20 163 views
2

我不知道如何框架标题,希望你们能理解我的问题。我正在寻找一些简单的替代方法,而不是手动替换横幅HTML代码中的文本。自动生成html代码

对于例 - 下面的代码

<a class="fragment" href="https://applink" target="_blank"> 
 
    <div> 
 
    <img class="imgbor" src ="https://static.geenapp.com/appromo/1250-100.png" alt="some description"/> 
 
    <span class="styleraise">App Name</span><span class="styleraise1">Price 0.99$</span> 
 
    <div class="textpara"> 
 
     
 
App description</div> 
 
</div> 
 
</a>

我期待这样的事情时,我填写了一些文字(我在Photoshop中创建的这个) enter image description here

所以在框中,它改变了HTML代码。我需要创建100个这样的横幅,这样很容易。 也许任何在线服务或脚本可以帮助我实现这一目标。

+0

您需要首先尝试的东西,然后问一个具体问题。否则,这将被视为offtopic,应该被关闭。阅读http://stackoverflow.com/help/how-to-ask和http://stackoverflow.com/help/mcve –

回答

1

下面是简单的HTML表单,它反应在每个输入改变,并产生您所需的HTML:

$(function() { 
 
\t $("input[type=text]").on("input", function() { 
 
    \t var app = $("[name=app]").val(); 
 
    var desc = $("[name=desc]").val(); 
 
    var imglink = $("[name=imglink]").val(); 
 
    var applink = $("[name=applink]").val(); 
 
    var price = $("[name=price]").val(); 
 
    $("#output").get(0).innerHTML = $('<div/>').text('<a class="fragment" href="' + applink + '" target="_blank"> \ 
 
     <div> \ 
 
      <img class="imgbor" src="' + imglink + '" alt="some description" /> \ 
 
      <span class="styleraise">' + app + '</span> \ 
 
      <span class="styleraise1">' + price + '</span> \ 
 
      <div class="textpara">' + desc + '</div> \ 
 
     </div> \ 
 
     </a>').html(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
App name<br> 
 
<input name="app" type="text"/><br> 
 

 
App description<br> 
 
<input name="desc" type="text"/><br> 
 

 
Image link<br> 
 
<input name="imglink" type="text"/><br> 
 

 
App link<br> 
 
<input name="applink" type="text"/><br> 
 

 
Price<br> 
 
<input name="price" type="text"/><br> 
 

 
<code id="output"></code>

+0

很好的答案。如果OP有选择,情况会好得多。使用模板文字是更干净的代码,但古代浏览器将不被支持或OP可以使用您创建的样式。 –

0

我建议你建立一个小的Web应用程序在后台这个小工具: https://docs.python.org/2/library/htmlparser.html

基本上,你想要做的是相应地更新所需的值,然后将文件流保存到新文件。 (您可以添加增量ID,这样你会得到“文件1.HTML”,“文件2.HTML”等)

+0

但确定有很多其他的选择暗示模板系统。 最近我不得不用一个XML文件执行类似的任务,我在NodejS后端(使用python)(这个解析器)[https://docs.python.org/2/library/xml.etree.elementtree.html]作为一种“CGI”)和前端的ReactJS。但是你可以按照你的意愿去做。 –

0

最新情况: JSFiddle

这是一个React的巨大用例!访问他们的docs并按照沿tutorial

反应过来的时候,你要创造数千个类似寻找组件特别有效。

例如,您的代码看起来像这样 -

class Fragment extends React.Component { 
    render() { 
    return (
     <a class="fragment" href="https://applink" target="_blank"> 
     <div> 
      <img class="imgbor" src={this.props.src} alt="some description" /> 
      <span class="styleraise">App Name</span> 
      <span class="styleraise1">Price 0.99$</span> 
      <div class="textpara">App description</div> 
     </div> 
     </a> 
    ); 
    } 
} 

您可以在父组件中重复该组件多次,只要您想要。 React对于可重用性非常好。