-2
我正在嘗試將li標籤回顯到UI標籤中。 然後想要用js編輯內容。如何用php創建html標籤並用js編輯內容？
在變量的幫助下，我想創建自定義ID，所以我可以使用document.getElementById更改內部HTML。
我認爲一切正常，但不是我嘗試創建li元素的部分。 （它的JS部分）
畢竟它應該看起來像 this.
Here是網站。
我的代碼：
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style type="text/css">
.products{
list-style:none;
margin-right:300px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
right:0;
top:0;
width:300px;
height:100%;
background:#ccc;
padding:0px 10px;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div>
<ul id='ergebnisgefunden' class="products">
</ul>
</div>
<script>
function getpreis(name) {
if (name == "Balloon") { return 25 }
if (name == "Feeling") { return 25 }
}
function getmenge(name) {
if (name == "Balloon") { return 1 }
if (name == "Feeling") { return 1 }
}
var produktliste = [];
produktliste[0] = "Balloon";
produktliste[1] = "Feeling";
var i = '';
var worter = [];
worter[0]= ' ';
var name = '';
var preis = '';
var produkteerstellt;
for (var s = 0; s<=produktliste.length;s++) {
i++;
produkteerstellt = true;
name = produktliste[s];
preis = getpreis(name);
//document.getElementById('ergebnisgefunden').innerHTML = '<?php //echo require('createproduct.php');?>'; //funktioniert für inner html ändern
//document.getElementById('ergebnisgefunden').innerHTML = '<?php //echo '<div id="ergebnisdiv">Hallo<\/div>';?>'; //erzeugt dib mit Hallo inhalt
//document.getElementById('ergebnisdiv').innerHTML = 'was geht ab'; -> ändert von oben erzeugtem div den inhalt
//document.getElementById('ergebnisgefunden').innerHTML = '<?php //echo '<img src=\"images/\' + "shirt1" + \'.gif\" style=\" height=\"300\"; width=\"150\";\"/>';?>'; //image
//document.getElementById('ergebnisdiv').innerHTML = 'was geht ab';
var produkta ='<a href=\"#\" class=\"item\">';
var produktimg= '<img src=\"images/' + "shirt1" + '.gif\" style=\" height=\"300\"; width=\"150\";\"/>';
var produktpname= '<p style=\"font-size:14pt\">' + name + '</p>';
var produktppreis='<p>Preis: �' + preis + '</p> </a>'; //+ a schließen
var textareamenge = '<textarea id=\"' + name.toLowerCase() + 'menge\" rows=\"1\" cols=\"8\" placeholder=\"St�ck\" style=\"overflow:hidden\">';
var textareabtn = '</textarea><input align=\"right\" type=\"button\" value=\"Hinzuf�gen\" id=\"btn' + name + '\"/>';
var produktscript= '<script>document.getElementById(\'btn' + name.toLowerCase() + '\').addEventListener(\'click\', function(event){' +
'addProduct(\"' + name + '\", parseFloat(document.getElementById(\'' + name + 'menge\').value)); });<\/script>';
document.getElementById('ergebnisgefunden').innerHTML = '<?php echo '<li id=';?>' + name+i + '<?php echo '</li>';?>'; //li von produkt
document.getElementById(name+i).innerHTML = produkta + produktimg + produktpname + produktppreis + textareamenge + textareabtn + produktscript;
}
</script>
</body>
</html>