Многие люди предлагают использовать для этого атрибуты jQuery и обработку метаданных.Здесь я просто предлагаю использовать глобальную переменную.Однако есть несколько проблем, с которыми вы, вероятно, сталкивались, поэтому позвольте мне объяснить решения:
(1).Если вы поместите переменную global , остерегайтесь href = "" в ваших якорях.Если вы запустите перезагрузку страницы, вы вернетесь в квадрат ноль, что не очень хорошо.Поэтому я удалил это.
(2).Вы хотите проверить глобальную переменную в mouseover и mouseout, чтобы сделать что-то вроде
if <triggered from current> return; // disabling check
Проблема в том, что в функции щелчка вы хотите сделать что-то вроде
if <there is a current> current.trigger('mouseout');
<set new current>
current.trigger('mouseover')
, но, как мыотключение mouseout и mouseover с помощью проверки отключения , затем запуск этих не работает.
У вас есть два варианта: a) вы можете установить current в null, вызвать эти два события, а затемустановить текущее на одно нажатие;б) Или вы можете изолировать эффект наведения / выхода из триггера, чтобы вызвать его в двух местах.
Параметр (а) представляет собой более сложный обработчик щелчков, но более простой обработчик мыши.Вариант (b) требует немного больше рефакторинга, но если вы предпочитаете идти по пути использования других функций jQuery, это, вероятно, хорошая идея.
(3).Поскольку я не использую идиомы jQuery, а ваш подход, нужно быть осторожным с регулярным выражением, чтобы оно соответствовало тому, что должно быть.Я сделал это с.
(4).Приведенный ниже код прикрепляет щелчок к якорям, как вы упомянули (хотя в некоторых решениях упоминаются сами изображения). Проблема заключается в том, как вы связываете объект, по которому щелкнули, с соответствующим изображением.В приведенном ниже коде jQuery find () является ключом.
(5).В jQuery лучше не использовать глобальные переменные, то есть переменные на уровне объекта окна.Вы все еще можете получить тот же результат, объявив переменную над соответствующими замыканиями, как показано ниже.Также людям нравится использовать $ для переменных, содержащих обернутые объекты jQuery, и я так и сделал.
(6).Наконец, остерегайтесь сравнения объектов.Приведенный ниже код гарантирует, что мы сравниваем объекты DOM, поэтому используйте jQuery get () .
Итак, это исправленный HTML-код (удаленный href):
<a id="anchor1" class="imageLink" ><img class="hoverImage" src="images/1.png"/></a>
<a id="anchor2" class="imageLink" ><img class="hoverImage" src="images/2.png"/></a>
<a id="anchor3" class="imageLink" ><img class="hoverImage" src="images/3.png"/></a>
(извините, URL-адреса изображений не такие, как у вас, на самом деле я тестировал приведенный ниже код)
Подход (a):
<script type="text/javascript">
$(function() {
var clickedImg = null; // this is common to all closures below
$("img.hoverImage")
.mouseover(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
// note the improved matching !
var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png";
$img.attr("src", src);
})
.mouseout(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
var src = $img.attr("src").replace("_hover","");
$img.attr("src", src);
});
$("a.imageLink").click(function() {
var oldClicked = clickedImg;
clickedImg = null; // set to null to trigger events
if (oldClicked) $(oldClicked).mouseout();
var newClicked = $(this).find('img').get(0);
$(newClicked).mouseover();
clickedImg = newClicked; // redefine at the end
alert($(this).attr('id') + " clicked"); // ajax call here
});
});
</script>
и подход (b):
<script type="text/javascript">
$(function() {
var clickedImg = null; // same global
// refactor the mouse over/out - you could use other jQuery ways here
function doOver($img) {
var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png";
$img.attr("src", src);
}
function doOut($img) {
var src = $img.attr("src").replace("_hover","");
$img.attr("src", src);
}
$("img.hoverImage")
.mouseover(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
doOver($img);
})
.mouseout(function () {
var $img = $(this);
if ($img.get(0) == clickedImg) return;
doOut($img);
});
$("a.imageLink").click(function() {
if (clickedImg) doOut($(clickedImg));
clickedImg = $(this).find('img').get(0);
doOver($(clickedImg));
alert($(this).attr('id') + " clicked"); // presumably your ajax call here
});
});
</script>
Вариант (а) сохраняет вашу структуру, но я думаю, что вариант (б) должен быть вашим следующим шагом, и это мое предпочтение.