如何在$循環中顯示數據以正確顯示每個div

當我在地圖上單擊標記時，我想要顯示與該標記關聯的數據庫中的數據。目前，我正在爲我創建的div進行此操作。當我點擊一個div來打開它下面的表單時，我遇到了一個問題，我想將相同的數據加載到表單中，但是當前唯一會加載到每個表單中的數據是第一個通過循環運行的數據。

換句話說，我的場地列表div可能會爲這個位置持有3個場地，我可以點擊每個div並在其下顯示一個表格，但是如果「Sally's Salon」是列表中的第一個div，則每個表格將顯示「莎莉沙龍」而不是自己的名字。這裏是我的代碼：

// initially detach form to be attached to each div on click 
var editForm = $('.edit-container').detach(); 

function fillForm(title, priority) { 
    $('.venue-input').val(title); 
    $('.priority-input').val(priority); 
} 

for(var i = array.length -1; i>=0; i--) { 
    var prop = array[i].feature.prop 

    if(prop.title) { 

    // create variable to hold html 
    var html = $([ 
     "<div class='venue-item'>", 
     " <span><strong>Venue Name</strong></span>", 
     " <span class='venue-name venue-title' data-title=" + prop.title + ">" + prop.title + "</span>", 
     "<span class='venue-priority' data-priority=" + prop.prioritylevel + "><strong>Priority</strong>" + ' ' + prop.prioritylevel + "</span></div>"].join("\n")); 

    // append venue item to venue list div with event handler to add form and prefill when clicked 
    $(html).appendTo('.venue-list').on('click', function() { 
     $(this).after(editForm); 
     fillForm($('.venue-title').data('title'), $('.venue-priority').data('priority')); 
    }); 
    }

任何投入將是有益的，我一直在爭奪這幾天了，不知道如果我連正確安裝HTML元素，但我主要就是想能夠點擊我創建的html元素之一，然後將數據加載到表單中，以便操縱它。

來源

2016-07-25 relee24

您正在附加內容的多個副本，但是有兩個元素使用相同的id（venue-priority & venue-title） - 在網頁上應該是唯一的。

此後，您使用jQuery來獲取這些元素，但是由於jQuery希望id是唯一的，所以它只會使用該id來獲取第一個（或最後一個，不確定）元素。

解決方案是不要在您的標記中使用重複的ID。

來源

2016-07-25 14:05:07 Jamiec

啊是的，我明白你的觀點。感謝您的迴應。我改變了ID的類，因爲我真的沒有真正使用ID的，除了這裏。我猜這不是正確的解決方案，雖然，我仍然得到相同的行爲，表格只填充第一個元素創建的數據。 – relee24

@ relee24那是因爲'.val（）'會做同樣的事情 - 只將值應用到第一個匹配的元素。 – Jamiec

好的，那就更有意義了。我認爲這是更復雜的事情，就像我沒有足夠理解閉包一樣;）。如果.val不是正確的方法，你能指出我正確的方向嗎？ – relee24

您似乎在第6行有語法錯誤。您可以使用開發人員工具在瀏覽器中查看錯誤，以防有其他錯誤。

$('#priority-input.val('priority);

應該

$('#priority-input').val('priority');

來源

2016-07-25 00:31:37 Keith

是的，謝謝。我輸入那部分而不是複製它，並錯過了'。問題仍然存在，但感謝錯字捕捉。 :) – relee24

其實，如果你想設置的值參數的值，你應該使用

$('#priority-input').val(priority);

不

$('#priority-input').val('priority');

來源

2016-07-25 01:22:14

如何在$循環中顯示數據以正確顯示每個div

回答

相關問題