Question

给出这个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();
}

这里我需要将回调函数传递给image元素的id属性的值，但是我有一些问题要理解this或$('this')在jQuery中的工作方式

更好的是，我希望以这种方式使用HTML代码：

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

能够从回调中的中获取由其ID标识的<tr>元素的每个子元素的值。

有人提出建议吗？

非常感谢

Answer 1

重新格式化bendewey的回答：

jQuery(function($) {
    $("#deleteForm").hide(); 
    $("img.del").click(function() { 
        $("#deleteForm").show();
        $(this).attr('id');  // this is the image Id
    })
});

Answer 2

$(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
}

Answer 3

这是一个小例子。此方法适用于任何父标记。

如果单击所有三个按钮，输出应该是（请注意console.log（）是Firebug功能，如果没有安装Firebug，可以用alert替换它）：

td
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>

希望这有帮助。

Answer 4

这样的事情（为清晰起见，删除了方法结构）：

$(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...
    }
});

jQuery：从回调中选择父属性

4 个答案: