使用$（'selector'）。each（）來修改和更新DOM元素的html？

我想在我的網站上的一堆鏈接上創建一個事件監聽器。這些鏈接在一個循環內生成，所以我最終與<a class = "replyButton" id = "replyID"<? echo $x; ?>等

我試圖使用下面的代碼來揭示一個輸入框，當每個相應的鏈接被點擊，但沒有運氣。我可以在一種情況下使用普通的JS來工作，但不使用JQuery，像這樣外推幾個。任何幫助都會非常棒。

window.onload = function(){ 

    $('.replyButton').each(function(index){ 
    var domElementId = "replyArea" + index; 
    domElementId.onclick = function() { 
    var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>'; 
    document.getElementById('domElementId').innerHTML = replyFieldHtml; 
    console.log('domElementId'); 
    return false; 
    } 
}); 
}

編輯：這裏是用來生成HTML環路IM ... $ X = 0; （$ x < 8）{ $ x ++; $ r = $ wallarray - $ x;

$postContent = $wall_content['wall_posts'][$x-1]; 
$postUser = getUserNameById($wall_content['userID'][$x-1]); 
?> 

<div class = "row"> 
    <div class = "span6"> 
     <div class = "span1" id = "wallPhoto"><img src ="assets/img/usr/profile_holder.jpg></div> 
     <div class = "span4"> 
      <div class = "span4" id = "wallFeedStyle"><a id = "wallUserLink" href = "#"><b><? echo $postUser; ?></b></a></div> 
     <div class = "row"> 
      <div class = "span5"> 
       <div class = "span4" id = "userPost"><? echo $postContent; ?></br><p class = "wallsmall"><a href="#" id = "postLike"></i>Like</a> &middot;<a class = "replyButton" id = "replyButton<? echo $x; ?>" href="#"></i>Reply</a></p></div></div> 
      </div> 
      <div class = "row"> 
       <div class = "span5"> 
      </div> 
     </div> 
     <div class = "row" id = "replyArea<? echo $x; ?>"></div> 
</div> 
<? 
} 
?>

來源

2013-02-02 user1953875

向我們展示您擁有的html。 – Adil

你想在單擊'.replyButton'時顯示輸入框？ –

我已經添加了html感謝@Adil和是JAck，或者在單擊回覆按鈕時插入該HTML塊。 – user1953875

您正在以錯誤的方式使用變量。試試這個：

window.onload = function() { 
    $('.replyButton').each(function (index) { 
     var domElementId = "replyArea" + index; 
     $('#' + domElementId).on('click', function() { 
      var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>'; 
      $(this).html(replyFieldHtml); 
      console.log(domElementId); 
      return false; 
     }); 
    }); 
}

來源

2013-02-02 08:51:37 hjpotter92

+1取消使用'onclick' –

太棒了。謝謝 - 現在就試試這個，讓你發表。 – user1953875

它似乎還沒有工作。當我刪除$（'selector'）。each（）行，並嘗試僅僅一種情況時，我似乎在使用$（'selector'）。on（'click'...）調用時也遇到了問題。 – user1953875

在深入研究.on（）和.bind（）背後的歷史後，我最終使用下面的代碼來解決這個問題。感謝你的幫助！

$('a.replyButton').on("click", function(){ 
var index = $(this).attr('id'); 

$('#replyArea'+index).html('<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>'); 
});

我最終將「replyLink」ID屬性更改爲數字。所以有一堆/ < .a>帶有類replyButton，ID屬性作爲一個數字。它似乎很好地完成了這項工作，不需要設置.each（）循環。

來源

2013-02-03 08:07:35 user1953875

使用$（'selector'）。each（）來修改和更新DOM元素的html？

回答

相關問題