jQuery Показывает/Скрывает классом, когда несколько объектов содержат упомянутый класс
Заранее спасибо за то, что выручили меня (для тех, кто имеет время и желает).
Я записал этот сценарий:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function() {
$('.foliobtn').show();
return false;
});
$('.foliobottom').mouseout(function() {
$('.foliobtn').hide();
return false;
});
$('.foliobottom').mouseover(function() {
$('.folionamedate').hide();
return false;
});
$('.foliobottom').mouseout(function() {
$('.folionamedate').show();
return false;
});
});
и помещенный это на эту страницу http://www.fraservalley-webdesign.com/portfolio/test.php.
Это работает кроме него, конечно, показывает/скрывает на каждом элементе с соответствующими классами, не только том, который я толплюсь. Я не могу исключительно назвать каждого, поскольку будут десятки, и это будет база данных управляемое содержание.
Кто-либо знает простой способ изолировать объект, я толплюсь в рамках сценария?
Это имеет смысл?
4 ответа
Переменная this привязана к запускающему элементу в обработчиках mouseover и mouseout, поэтому вы можете сказать что-то вроде
$('.foliobtn',this).hide();
, чтобы скрыть элементы с классом «foliobtn» внутри элемента запуска. .
Не могли бы вы попробовать это?
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function() { $(this).show(); return false; });
$('.foliobottom').mouseout(function() { $(this).hide(); return false; });
Вам следует использовать метод связывания jquery :
Что-то вроде
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function(e) {
$(this).find('.foliobtn').show();
$(this).find('.folionamedate').hide();
});
$('.foliobottom').mouseout(function(e) {
$(this).find('.foliobtn').hide();
$(this).find('.folionamedate').show();
});
});
Здесь вы не изменяете видимость всех элементов на основе класса, а находите элемент, использующий этот класс и текущий узел
Вы можете использовать другую функцию в качестве обратного вызова, это будет эффективно действовать как своего рода переключатель и упростить ваш код.
Попробуйте:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').hover(function() {
$(this).find('.foliobtn').show();
}, function() {
$(this).find('.foliobtn').hide();
});
});
Вы тоже не В этом случае необходимо вернуть false , потому что в браузере нет поведения по умолчанию для этого элемента.
return false больше подходит для чего-то вроде щелкните для ] или отправка формы, но на самом деле вы, вероятно, захотите использовать вместо него preventDefault () .