jQuery: исчезают 2 элемента, когда 1 был нажат - PullRequest
Новая
       17

jQuery: исчезают 2 элемента, когда 1 был нажат

1 голос
/ 23 декабря 2010

У меня есть PHP / PostgreSQL / Oracle-скрипт, который отображает ссылки в виде «тегов», по которым можно щелкнуть, чтобы отобразить только записи базы данных, соответствующие этому «тегу». И тогда у меня есть «X» рядом с каждым «тегом», так что пользователь может скрывать неинтересные «теги»:

alt text

Я хотел бы добавить эффект затухания к обоим элементам («тег» и «X») - при нажатии «X». Итак, я пытаюсь: 

<!DOCTYPE html>
<html>
<head>
<style>
a.hide {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.hide:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.filter {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.filter:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
        $('a.hide').click(function () {
                $(this).fadeOut('fast');
        });
});
</script>
</head>
<body>
<p>Please click on
<a class="filter" href="?filter=1">Tag 1</a><a
class="hide" href="?hide=1">X</a></p>

<p>Please click on
<a class="filter" href="?filter=2">Tag 2</a><a
class="hide" href="?hide=2">X</a></p>
</body>
</html>

Однако у меня есть 2 проблемы:

  1. Когда мой PHP-скрипт работает быстро, тогда я вообще не вижу эффекта затухания. (Это небольшая проблема, потому что мой настоящий сценарий далеко не быстрый : -) )
  2. Мне удается только исчезнуть нажатием "X". Как я могу скрыть "тег" слева от него? (И я не могу использовать #id здесь, потому что мой настоящий скрипт содержит сотни таких «тегов»)

Пожалуйста, подтолкните новичка jQuery в правильном направлении! Alex

Ответы [ 3 ]

2 голосов
/ 23 декабря 2010

Вы можете использовать .prev(), чтобы получить предыдущего брата, затем .andSelf(), чтобы снова включить сам X, например так: 

$(document).ready(function () {
  $('a.hide').click(function () {
    $(this).prev().andSelf().fadeOut('fast');
  });
});

Если вы хотите затемнить "Пожалуйста, нажмите на ...", то затемните <p>, взобравшись на него с помощью .closest() следующим образом: 

$(document).ready(function () {
  $('a.hide').click(function () {
    $(this).closest('p').fadeOut('fast');
  });
});
1 голос
/ 23 декабря 2010

И этот способ исправит небольшую проблему невидимости затухания ... 

$(document).ready(function () {
  $('a.hide').each(function (i, anchor) {
    var $anchor = $(anchor);
    var oldHref = $anchor.attr('href');    
    $anchor.attr('href', '#');
    $anchor.click(function(){
       $anchor.prev().andSelf().fadeOut('fast', function(){
         window.location.href = oldHref;
       });
    });    
  });
});

По сути, он удаляет href и заменяет его на #, поэтому он не будет перемещаться, пока событие не будетуволена.После исчезновения пользователь переходит на исходную ссылку.

0 голосов
/ 23 декабря 2010

Поскольку длительность является первым параметром hide (), вы должны использовать его следующим образом: 

hide(1000, 'explode');
...