JQuery: выбор родительского атрибута из обратного вызова - PullRequest
Новая
       12

JQuery: выбор родительского атрибута из обратного вызова

1 голос
/ 06 февраля 2009

учитывая этот HTML-код: 

<td><img class='del' id='4' src='images/delete.gif'></td>

У меня проблемы с пониманием того, как выполнить следующий код: 

$(document).ready(
    function(){ 
        setup();                            
    }
);

function setup(){
    $("#deleteForm").hide();
    $("img.del").bind('click', formDisplay);
}   

function formDisplay(){
   $("#deleteForm").show();
}

Здесь мне нужно передать обратному вызову значение атрибута id элемента изображения, но у меня возникла проблема с пониманием того, как this или $('this') работают в jQuery

Еще лучше, я хотел бы иметь HTML-код таким образом: 

<tr id='4'>
   <td>...</td><td>...</td><td><img class='del' src='images/delete.gif'></td>
</tr>

возможность получить значение каждого дочернего элемента <tr>, идентифицированного по его идентификатору, из в обратного вызова.

У кого-нибудь есть советы?

Большое спасибо

Ответы [ 4 ]

3 голосов
/ 06 февраля 2009

Просто переформатирую ответ Бендевей: 

jQuery(function($) {
    $("#deleteForm").hide(); 
    $("img.del").click(function() { 
        $("#deleteForm").show();
        $(this).attr('id');  // this is the image Id
    })
});
1 голос
/ 06 февраля 2009 
$(document).ready( function(){ 
    setup(); 
});

function setup() { 
    $("#deleteForm").hide(); 
    $("img.del").bind('click', formDisplay); 
} 

function formDisplay() { 
    $("#deleteForm").show();
    $(this).attr('id');  // this is the image Id
    $(this).closest('tr').attr('id');  // this is the tr Id
}
0 голосов
/ 07 февраля 2009

Вот небольшой пример. Этот метод работает для любых родительских тегов.

Если вы нажимаете все три кнопки одна за другой, вывод должен быть (обратите внимание, что console.log () - это функция Firebug, вы можете заменить ее предупреждением, если Firebug не установлен):

  • тд
  • div
  • корпус

Обратите внимание на последний результат. В этом случае TD без таблицы не считается родительским.

Вот код: 

<body class="body">

<script type="text/javascript">

    $(document).ready(function(){
        setup();
    });

    function setup() {
        $("#deleteForm").hide();
        $("img.del").click(formDisplay);
    }

    function formDisplay() {
        $("#deleteForm").show();
        var p = $(this).parent(); // parent tag
        p.attr('id');  // this is the image id -- what you need
        console.log(p.attr("class")); // show parent element class to show difference
    }

</script>

<table class="table">
<tr class="tr">
<td class="td"><img class='del' id='4' src='images/delete.gif'></td>
</tr>
</table>

<div class="div"><img class='del' id='5' src='images/delete.gif'></div>

<td class="td"><img class='del' id='6' src='images/delete.gif'></td>

<div id="deleteForm">text</div>

</body>

Надеюсь, это поможет.

0 голосов
/ 06 февраля 2009

Примерно так (структура метода удалена для ясности): 

$(document).ready(function(){
    $("deleteForm").hide();

    $("img.del").click(function(){
        $("#deleteForm").show();
        $(this).id; // I can't remember if this is cross-platform or not, but you get the idea...
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...