小JS迴路問題

Question

我有一個從數據庫調用數據的腳本。對於每個結果都會輸出一個新的div。但是，當點擊調用函數search（）的按鈕時，我只會得到一個結果。我想問題是：我如何爲每個結果創建一個新的div，而不是將其設置爲找到的第一行？

function search() { 
    var xhr2 = new XMLHttpRequest(); 
    xhr2.addEventListener ("load", view); 
    var reg = document.getElementById("type").value; 
    xhr2.open("GET", "getresults.php?type=" + reg); 
    xhr2.send(); 
} 
function view(e, resulthtml) { 
    var array = JSON.parse(e.target.responseText); 
    for (var count=0; count<array.length; count++) 
    { 
    var id = array[count].id; 
    var username = array[count].username; 
    var srcpath = array[count].srcpath; 
    var title = array[count].title; 
    var type = array[count].type; 
    var postcode = array[count]. postcode; 
    var description = array[count]. description; 
    var price = array[count].price; 
    var phone = array[count].phone; 
    var lat = array[count].lat; 
    var lon = array[count].lon; 

    resulthtml =   "<div class='col-md-4'>" 
       + "<div class='thumbnail'>" 
       + "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>" 
       + "<div class='caption'>" 
       + "<h3>" 
       + description 
       + "</h3>" 
       + "<p>" 
       + "£" + price + "" 
       + "</p>" 
       + "<p>" 
       + "Contact number:" 
       + "</p>" 
       + "<p>" 
       + "<input type='submit' value='Contact seller' onclick='search()'/>" 
       + "</p>" 
       + "</div>" 
       + "</div>" 
       + "</div>" 

    } 
    document.getElementById("row").innerHTML = resulthtml; 
} 


</script> 

Answer 1

你在循環的每次迭代覆蓋resulthtml。將其初始化爲循環外部的空字符串，然後添加到它。

編輯：你也在循環中做了很多工作，可以在它之外提升，主要是所有的字符串連接。這在瀏覽器上會更容易：

var item, id, username, srcpath, title, type, postcode, description, price, phone, lat, lon, 
    resulthtml = '', 
    pre = "<div class='col-md-4'><div class='thumbnail'><img id='a' class='a' alt='300x200' src='", 
    inner1 = "'><div class='caption'><h3>", 
    inner2 = "</h3><p>£", 
    post = "</p><p>Contact number:</p><p><input type='submit' value='Contact seller' onclick='search()'/></p></div></div></div>"; 

for (var count=0; count<array.length; count++) 
    { 
    item = array[count]; 
    id = item.id; 
    username = item.username; 
    srcpath = item.srcpath; 
    title = item.title; 
    type = item.type; 
    postcode = item. postcode; 
    description = item. description; 
    price = item.price; 
    phone = item.phone; 
    lat = item.lat; 
    lon = item.lon; 

    resulthtml += pre + srcpath + inner1 + description + inner2 + price + post; 

    } 

Answer 2

乾杯。認爲這是一個小東西！

<script type="text/javascript"> 

function search() { 
    var xhr2 = new XMLHttpRequest(); 
    xhr2.addEventListener ("load", view); 
    var reg = document.getElementById("type").value; 
    xhr2.open("GET", "getresults.php?type=" + reg); 
    xhr2.send(); 
} 
function view(e, resulthtml) { 

resulthtml = ""; 

    var array = JSON.parse(e.target.responseText); 
    for (var count=0; count<array.length; count++) 

    { 
    var id = array[count].id; 
    var username = array[count].username; 
    var srcpath = array[count].srcpath; 
    var title = array[count].title; 
    var type = array[count].type; 
    var postcode = array[count]. postcode; 
    var description = array[count]. description; 
    var price = array[count].price; 
    var phone = array[count].phone; 
    var lat = array[count].lat; 
    var lon = array[count].lon; 

    resulthtml = resulthtml +   "<div class='col-md-4'>" 
       + "<div class='thumbnail'>" 
       + "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>" 
       + "<div class='caption'>" 
       + "<h3>" 
       + description 
       + "</h3>" 
       + "<p>" 
       + "£" + price + "" 
       + "</p>" 
       + "<p>" 
       + "Contact number:" 
       + "</p>" 
       + "<p>" 
       + "<input type='submit' value='Contact seller' onclick='search()'/>" 
       + "</p>" 
       + "</div>" 
       + "</div>" 
       + "</div>" 

    } 
    document.getElementById("row").innerHTML = resulthtml; 
} 


</script> 

Answer 3

你不能這樣做

document.getElementById("row").innerHTML = resulthtml; 

因爲這將覆蓋#row老innerHTML。相反，你可以這樣做：

document.getElementById("row").innerHTML += resulthtml; 

這增加resulthtml到innerHTML返回的字符串，或者使用方法：

document.getElementById("row").appendChild(resulthtml); 

這不完全一樣的東西。這是一個你將要使用的個人選擇的問題。