列表中的每個產品的基於jQuery懸停彈出事件

我有一個jQuery中的函數的小問題。每當用戶將產品懸停時，我需要顯示一個彈出窗口。我的產品列表中，我想有指定到每一個產品的彈出，以顯示它的標題和描述：列表中的每個產品的基於jQuery懸停彈出事件

這是產品的列表（在縮略圖顯示）

<!-- This Div contains the List of Products --> 
<ul class="thumbnails"> 

       @foreach (var thumbnail in Model.ForfaitsInThumbNail) 
       { 
    <div class="thumbnail"> 
           <img src= "@Url.Action("GetById", "ImageForfait", new { idForfait = thumbnail.Forfait.Id })" alt=""/> 
           <div class="caption"> 
            <h2 class="fontTitle">@thumbnail.Forfait.Titre</h2> <h5 class="fontYearHijri"> pour l'année @thumbnail.Forfait.AnneeHijri H </h5> 

            ....... 
           </div> 
     <!-- This div should contain the pop-up for every Product --> 
          <div class='pop-up' id='pop-up'> <h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div> 
          </div> 
    </div> 
        } 
</ul>

這是我可憐的jQuery函數至極只適用於一個產品，而不是所有的人都在名單

<script> 
$('.thumbnail').each(function() { 
    $(this).hover(function (e) { 
    $('.pop-up').show() 
     .css('top', e.pageY + 20) 
     .css('left', e.pageX + 10) 
     .appendTo('body'); 
}, function() { 
    $('.pop-up').hide(); 
}); 
}); 
$('.thumbnail').each(function() { 
    $('.thumbnail').mousemove(function(e) { 
     $(".pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10); 
    }); 
});

此函數沒有錯誤，但它只顯示最後一個Product的彈出窗口，而且這看起來是邏輯的，因爲它無法識別指定Product的div。所以我的問題是，我怎樣才能實現這個功能，就像我想要的一樣（每個產品都特別彈出）？有任何想法嗎？謝謝:)

來源

2013-08-01 Hamdi Baligh

你給'.each（）'提供了太多的參數。它只需要一個參數，一個函數在每個元素上被調用。第二個參數被忽略。 – Barmar

請問您可以多兌換嗎？我的功能有什麼問題？ –

我的評論是在您編輯之前引用的版本。 – Barmar

I've update this answer by constructing a fiddle to show a working solution。將來，請您儘可能提供小提琴，因爲這爲我們節省了大量時間，無需爲自己構建小提琴。

這裏是我的JavaScript：

// Note, this is important 
$(document).ready(function() {  

    // We don't need an each, and include the e event handler 
    $('.thumbnail').hover(function (e) { 
     $('#pop-up').show() 
      .css('top', e.pageY + 20) 
      .css('left', e.pageX + 10) 
      .appendTo('body'); 
    }, function() { 
     $('#pop-up').hide(); 
    }); 
    $('.thumbnail').mousemove(function (e) { 
     $("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10); 
    }); 
});

事情你也要注意：你不需要同時擁有ID #pop-up並在相同的元素類.popup，除非這是一些特殊的彈出它從標準彈出類繼承而來。它看起來像你的ID /類的用法可能是關閉的，所以只要確保你使用的ID是唯一的東西，而類有多個實例。

情侶修復我做：

始終包裝您的jQuery的$(document).ready()方法，這將確保應用的事件之前
你忘了包括事件的DOM滿載你的hover功能，但我認爲你已經更新了你的問題，包括這個。

來源

2013-08-01 08:27:39

此採空工作，甚至一個產品 –

我更新了一個新的功能後，你可以看到它 –

看一看現在，它工作。 –

你忘了傳遞事件對象參數上懸停事件

//do this 
... 
$(this).hover(e){ 
    -- 
} 
...

希望這應該工作。

如果您發現您使用了（e.pageX），那麼（e）來自哪裏。它必須作爲參數傳遞。

來源

2013-08-01 08:31:05

好吧，我改變了我的功能，看看編輯 –

列表中的每個產品的基於jQuery懸停彈出事件

回答

相關問題