Есть ли альтернатива использованию if или case в jQuery?

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. Настройте общую функцию и используйте атрибут, хэш или индекс, как упомянуто Уильямом Бренделем

$('.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

на основе работы от: Уильям Брендель, вот окончательный код

<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>

Answer 4

Вы можете использовать следующее:

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

e в каждой из функций представляет объект события для наведения мыши и события наведения мыши соответственно. Чтобы узнать, к какому из изображений оно сработало, используйте $(this).

У некоторых людей (включая меня) возникли проблемы с использованием функции hover(), поскольку она не всегда правильно регистрирует события отключения мыши. Возможно, это было исправлено в более поздних версиях, но я обычно делаю $('img').mouseover(...).mouseout(...) вместо этого.

Answer 5

В jQuery вы можете связать событие hover со всеми ними одновременно

$("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)