Возможно ли обобщение этого скрипта?

ProgramBox

Возможно ли обобщение этого скрипта?

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #hover

#javascript #jquery #HTML #наведите курсор

Вопрос:

Я очень новичок в jQuery с небольшим опытом программирования, поэтому, пожалуйста, примите это во внимание.

Я создал сценарий экономии времени, который будет принимать следующие две переменные:

1) Элемент (который содержит одно изображение) — imgelement

2) URL-адрес изображения для наведенного изображения — hoverimageurl

Код:

 /* Image Hover Script (Start) */
    var imgelement = "#element"; /* Element containing the original image */
    var hoverimageurl = "http://www.domain.com/image.png2"; /* Image URL of the hover image */
    
    jQuery(document).ready(function() {
    
    	/* Add CSS and a class to the original image to fix positioning and give it an identification */
    	jQuery(imgelement   " img").addClass("originalimage");
    		
    	/* Prepend hover image to the element. Set the SRC to the hover image URL */
    	jQuery(imgelement).prepend('<img class="hoverimage" src="'   hoverimageurl   '">');
    	
    	/* Fade out original image and fade in hover image on hover */
    	jQuery(imgelement).hover(function() {
    		jQuery(imgelement   " .originalimage").stop(true).fadeTo(1000, 0);
    		jQuery(imgelement   " .hoverimage").stop(true).fadeTo(1000, 1);
    	}, function() {
    		jQuery(imgelement   " .hoverimage").stop(true).fadeTo(1000, 0);
    		jQuery(imgelement   " .originalimage").stop(true).fadeTo(1000, 1);
    	});
    	
    });
    /* Image Hover Script (End) */

 /* Image Hover CSS (Start) */
#pix-fe .originalimage {
	position: relative;
}

#pix-fe .hoverimage {
	position: absolute;
	width: 100%;
	height: 100%;
}
/* Image Hover CSS (End) */

 <div class="element">
  <a href="http://www.domain.com"><img src="http://www.domain.com/image1.png"></a>
</div>

То, что делает скрипт, исчезает до изображения наведения, заданного из hoverimageurl переменной, когда элемент наведен. Это работает отлично, но я захочу использовать несколько экземпляров этого скрипта, и для этого мне нужно будет добавить имена переменных с увеличивающимся числом для каждого экземпляра, который мне требуется. Это неэффективно, потому что основную часть скрипта нужно будет повторять для каждого экземпляра, когда в идеале мне просто нужен список переменных и один экземпляр основного скрипта.

Есть ли вообще какой-либо способ добиться обобщения этого кода? Я знаю this , но imgelement всегда буду ссылаться на значение в отношении imgelement переменной, поэтому, насколько мне известно, я не вижу, как это можно сделать.

Большое вам спасибо за ваше время.

1. Я уверен, что вы можете РАЗОБРАТЬСЯ с этим, но нам также нужно будет просмотреть ваш HTML-код. Не могли бы вы отредактировать свой вопрос, чтобы включить его.

2. Что произойдет, если вы попытаетесь сделать селектор более плотным? Например, я нацеливаю его на #element :hover ? this В этом случае не следует ссылаться на один экземпляр?

3. @seth Селектор уже неверен; идентификатор должен быть уникальным. Класс был бы лучше, и я предполагаю $('.example').each(function(){console.log(this)}) , что у него были бы наилучшие результаты.

4. Спасибо, что указали на это, моя ошибка. Тем не менее, для вашего решения потребуется расширение, $('.example :hover') ... если я не ошибаюсь, поскольку сценарий должен запускаться только для элемента, который находится в состоянии наведения.

Ответ №1:

Ничего такого, с чем не справился бы маленький css 🙂

 .image-switch {
  position: relative;
}

.image-switch img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transition: opacity 1s
}

.image-switch:hover img:last-child{
  opacity: 0
}

 <span class="image-switch">
  <img src="http://placehold.it/200x200/FF0000">
  <img src="http://placehold.it/200x200">
</span>

Ответ №2:

Вы действительно должны сделать что-то подобное, используя css, поскольку это будет более надежным, чем js, и более понятным. Тем не менее, это хорошая возможность узнать о плагинах jQuery и о том, как вы можете использовать его, чтобы сделать ваш код более СУХИМ и многоразовым.

Чтобы добавить новый метод к объекту jQuery, вы можете объявить функцию, для jQuery.fn которой это prototype .

ваша функция this будет привязана к выбранной вами коллекции элементов, поэтому вам нужно вызывать каждый из них, если вы планируете заставить api работать с коллекциями.

Оттуда вам просто нужно добавить свою функциональность в функцию. Любые аргументы будут переданы в вашу функцию, чтобы вы могли передавать настройки во время выполнения. здесь он используется для передачи URL-адреса img.

Другая базовая функция, которую я использовал, заключалась jQuery.fn.find в том, что у нас есть ссылочный элемент, из которого мы можем просматривать dom, вместо того, чтобы использовать строки, которые на мой взгляд более запутанны.

Чтобы запустить плагин, вам просто нужно создать селектор jQuery и вызвать ваш новый метод. $('#selector').hoverImage('url')

Теперь, когда вы знаете основы создания плагина jQuery, вам действительно следует выяснить, как добиться того же результата с помощью чистого css.

 /*
 * jQuery hoverImage plugin
 *
 * @param {string}  url  url of the hover image
*/
(function() {
  jQuery.fn.hoverImage = function(url) {
    // loop over the element collection
    this.each(function() {
      // bind your functionality
      var $this = $(this)
      var $img = $this.find('img')
      var $hover = $('<img class="hoverimage" src="'   url   '">')
      
      $this.prepend($hover)
      
      $this.hover(function() {
        $img.stop().fadeTo(1000,0)
        $hover.stop().fadeTo(1000,1)
      }, function() {
        $img.stop().fadeTo(1000,1)
        $hover.stop().fadeTo(1000,0)
      })
    })
  }
})()
// run your plugin
$('#element').hoverImage('http://lorempixel.com/400/200/')

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>