Страница 1 из 1

Текущий элемент $(this)

СообщениеДобавлено: 17 фев 2011, 17:11
StasB
JQuery
Такая вот проблема... Не знаю как работает $(this)
В интернете ничего не нашел...

Вот код:
Код: Выделить всёРазвернуть
$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.ajax(
             {
                type: "POST",
                url: "profile/friends/add/submit.php",
                data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),
                success: function(html)
                      {
                         $(this).parents(".BlokProfileFriendsLeft").animate({opacity: "hide"}, "slow");
                      }
             });
       return false;
    });
});


AJAX запрос происходит, скрипт "profile/friends/add/submit.php" выполняется, а вот прозрачность у текущего родительского элемента не меняется....

Если в строке:
Код: Выделить всёРазвернуть
data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),

убрать $(this) то прозрачность изменится...

Я так понимаю это из-за того, что "текущий элемент" из
Код: Выделить всёРазвернуть
$('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()

меняется на
Код: Выделить всёРазвернуть
data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),


Но ведь #FriendsAddDeleteId находится внутри .BlokProfileFriendsLeft

Короче HELP =) Уже вторые сутки гуглю...

Re: Текущий элемент $(this)

СообщениеДобавлено: 17 фев 2011, 23:34
Zver
Код можно было бы и полностью, желательно с html.

Re: Текущий элемент $(this)

СообщениеДобавлено: 17 фев 2011, 23:56
StasB
JS код (естественно фреймворк JQuery подключен):
Код: Выделить всёРазвернуть
$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.ajax(
             {
                type: "POST",
                url: "profile/friends/add/submit.php",
                data: "FriendsAddDeleteId="+$(this).parents(".BlokProfileFriendsLeft").find("#FriendsAddDeleteId").val(),
                success: function(html)
                      {
                         $(this).parents(".BlokProfileFriendsLeft").animate({opacity: "hide"}, "slow");
                      }
             });
       return false;
    });
});


HTML код:
Код: Выделить всёРазвернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</
div>
 

Таких блоков много... Т.е. вся страница может состоять примерно так:
Код: Выделить всёРазвернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</
div>

<
div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</
div>

<
div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete">Отклонить</a>
      <input id="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
    </div>
  </div>
</
div>
  


Т.е. нужно чтобы при нажатии на определенный ".FriendsAddDelete" определялся элемент "#FriendsAddDeleteId" в текущем родительском элементе ".BlokProfileFriendsLeft", а затем этот родительский элемент плавно поменял прозрачность...

Re: Текущий элемент $(this)

СообщениеДобавлено: 18 фев 2011, 11:51
Zver
Верный шаблон:
Код: Выделить всёРазвернуть

<div class="BlokProfileFriendsLeft">
  <div>
    <div class="BlokProfileFriendsLeftAddLink">
      <a class="FriendsAddDelete" href="#">Отклонить</a>
    </div>
  </div>
  <input class="FriendsAddDeleteId" name="FriendsAddDeleteId" value="'.$friends_user['id'].'" type="hidden" />
</
div>
 


Верный jQuery:
Код: Выделить всёРазвернуть

$(document).ready(function()
{
    $('.BlokProfileFriendsLeft .FriendsAddDelete').click(function()
    {
       $.post('profile/friends/add/submit.php', { FriendsAddDeleteId: $(this).parent('.BlokProfileFriendsLeft').children('.FriendsAddDeleteId').val() }, function(data)
       {
           $(this).parent('.BlokProfileFriendsLeft').fadeOut();
       }
    
       return false
;
    });
});
 


Ошибок много:

1. <input id="FriendsAddDeleteId" .... />. На странице не может быть более одного объекта с одним id.
2. jQuery.find();. При правильном построении шаблона и использование вместе с $(this) его использование невостребованное.
3. Будучи пользуйтесь fireBugом или другим отладчиком javascript.
4. Читайте доки http://docs.jquery.com/

И советую обновиться до jQuery 1.5.

Re: Текущий элемент $(this)

СообщениеДобавлено: 18 фев 2011, 13:13
StasB
Почему не может быть более одного id ?

Спасибо, работает! (Только я к старой библиотеке как-то уже привык, мне надо то один аякс...)

Re: Текущий элемент $(this)

СообщениеДобавлено: 18 фев 2011, 16:17
Zver
Почему не может быть более одного id ?

http://softwaremaniacs.org/blog/2006/01 ... ifference/

Спасибо, работает! (Только я к старой библиотеке как-то уже привык, мне надо то один аякс...)

В основном разницы нет. В версии 1.5 полностью переработан ajax. Быстрее и кроссбраузернее. Решать вам.