使用onclick從另一個div顯示數據（jQuery/HTML）

不太確定如何描述這一點，但在這裏我去。使用onclick從另一個div顯示數據（jQuery/HTML）

用戶將信息添加到表單。提交後，數據將填充二十個div中的一個。隨後，當用戶回到這個頁面時，他們可以點擊一個div並以與他們第一次輸入數據相同的形式顯示這些信息，從而允許他們對其進行編輯。

我正在尋找一種解決方案，當用戶使用觸發事件時，他們點擊的二十個div將數據從該div返回到窗體。所以，如果我點擊div 5，它將返回'div_5'中的數據並將其顯示到輸入表單中。

爲此，請使用jQuery和HTML。

下面是該頁面的鏈接：Click on 'Buzz' when you get there.site.

2011-08-05 Adam

我沒有測試過這一點，我要去假設你的輸入字段有一個名爲inputBox一個ID。您可以爲每個div註冊以下onclick處理程序，將該div的值放入輸入框中。這個例子將假設這是第五格onclick句柄其中有div5

$("#inputBox").val($("#div5").text())

它應該是這樣簡單的ID，但作爲一個聲明，我沒有實際測試中的代碼片段這個答案。

來源

2011-08-05 03:08:41

下面的代碼進行測試，並在Firefox上您的網站，（通過控制檯）：

(function(global) 
{ 
    var $ = global.jQuery; 

    $(function() 
    { 
     var $TargetForm = $('div.add_buzz_item form').eq(0), 
      /* 
      * EXTREME inefficiencies on the next 4 lines due to lack of specificity in your markup 
      */ 
      $TitleInput = $TargetForm.find('div:contains("Title:")').next().find('input'), 
      $ImageInput = $TargetForm.find('div:contains("Image:")').next().find('input'), 
      $LinkInput = $TargetForm.find('div:contains("Link:")').next().find('input'), 
      $DescriptionInput = $TargetForm.find('div:contains("Description:")').next().find('textarea'); 

     $('div.site_buzz_scroll').delegate('div.buzz_block', 'click', function() 
     { 
      var $BuzzItem = $(this); 

      $TitleInput.val($BuzzItem.find('div.buzz_title').html()); 
      $ImageInput.val($BuzzItem.find('div.buzz_icon img').attr('src')); 
      $LinkInput.val($BuzzItem.find('div.buzz_link').html()); 
      $DescriptionInput.val($BuzzItem.find('div.buzz_desc').html()); 
     }); 
    }); 
}(window));

你會做你自己一個大忙，如果你在最起碼，唯一命名的表單字段，以便他們可以更容易地找到並定位。代碼會更小並且運行效率更高。也就是說，我儘可能高效地完成了這項工作。我使用.delegate()，以便您可以將「buzz_blocks」動態添加到DOM，而無需重新綁定它們。

來源

2011-08-05 03:13:20 JAAulde

使用onclick從另一個div顯示數據（jQuery/HTML）

回答

相關問題