Question

我有大约10张图片，当:hover每张图片都有ajax.load时会触发。我即将做10 jquery.hover，但有些事情告诉我有更好的解决方案。

我在考虑像

这样的事情

case 1 : load a
case 2 : load b
case 3 : load c
etc...

我如何在jquery中执行此操作？

了解10张不同文字的10张不同图片必须加载到<div>所以现在我正在做

$('#a).hover.load('file' #tx-a');
$('#b).hover.load('file' #tx-b');
$('#c).hover.load('file' #tx-c');

Answer 1

以下是一个简单的例子：

<p id="status">&nbsp;</p>
<img class="viewable" id="unique" src="foo.jpg"/><br/>
<img class="viewable" id="id" src="foo.jpg"/><br/>
<img class="viewable" id="for" src="foo.jpg"/><br/>
<img class="viewable" id="each" src="foo.jpg"/><br/>
<img class="viewable" id="element" src="foo.jpg"/><br/>

<script type="text/javascript">
  $(function() {
    var stuff = ['hello', 'world', 'you', 'look', 'nice'];

    $('.viewable').hover(
      // triggered when mouse moves onto element
      function() {
        var index = $('.viewable').index(this);

        // Replace this next line with a jQuery AJAX call. Pass the index 
        // as a parameter to whatever location you are pulling the text 
        // from, and have the AJAX callback stuff the text into the 
        // #status element. This is just a placeholder.
        $('#status').html('Hover IN, index ' + index + ' (' + stuff[index] + ')');
      },
      // triggered when mouse move off of element
      function() {
        // Optional: clear status element when mouse moves off image
        $('#status').html('&nbsp;');
      }
    );
  });
</script>

Answer 2

我肯定会建议使用某种共享功能。我会提出两点建议。

选项1.设置插件，然后将所有10绑定到插件。

(function($) {
  $.fn.loadImageOnHover = function(image) {
    return $(this).hover(function() {
        // load the image using ajax
      }, function() {
        // unload
      });
  };
})(jQuery);

$('#image1').loadImageOnHover('image.jpg');
$('#image2').loadImageOnHover('image2.jpg');
$('#image3').loadImageOnHover('image3.jpg');
$('#imageN').loadImageOnHover('image4.jpg');

选项2.设置一个公共函数并使用William Brendel提到的属性，哈希或索引

$('.hoverImage').hover(function() {
  var image = this.hash.replace('#','');
  alert(image);
  // load via ajax
}, function() {
  // unload
});

<a href="#image1.jpg" class="hoverImage">Hover</a>
<a href="#image2.jpg" class="hoverImage">Hover</a>
<a href="#image3.jpg" class="hoverImage">Hover</a>
<a href="#imagen.jpg" class="hoverImage">Hover</a>

Answer 3

在jQuery中，您可以立即将悬停事件绑定到所有这些

$("img").hover(function(e) {
    // triggered when mouse enters the element
    // here you can load picture by Ajax
}, function(e) { 
    // triggered when mouse leaves the element

    // unload picture or do whatever else ...
});

您可以通过$(this)

参考当前图片元素

Answer 4

您可以使用以下内容：

$('img').hover(function (e) { ... }, function (e) { ... });

每个函数中的e分别代表mouseover和mouseout事件的事件对象。要找出它触发的图像，请使用$(this)。

有些人（包括我自己）在使用hover()函数时遇到了问题，因为它并不总是正确地注册mouseout事件。也许这已经在以后的版本中得到修复，但我通常会$('img').mouseover(...).mouseout(...)而不是确定。

Answer 5

基于以下工作：William Brendel，这是最终的代码

<script type="text/javascript">
$(document).ready(function () {


    $('#equipe-gens img').hover(
      function() {
                    myID=$(this).attr('id');
                    $('#equipe-profile').load('equipedecourse.html #' + myID);
                    $('#'+myID).css('border','2px solid red');
                   },
      function() { 
                    $('#'+myID).css('border','2px solid #000000');
                    $('#equipe-profile').html("<h1>Profil</h1><p>Pour voir le profile des membre de l'équipe, sélectinnez-les</p>");
                   }
    );
  });
</script>

有没有在jQuery中使用if或case的替代方法？

5 个答案: