Question

我有一个图像然后是一个锚，然后是一个包含textarea的div。如何在点击图片时获取该textarea的ID？

以下是 HTML

<img  src="Image/icons/preview.png" alt="Preview" id="img1" onclick="ViewHtml(this.id);" />

<a id="ancHeader">Header html</a>  

<div class="collapse">
    <textarea rows="30" cols="22" id="txtHtmlHead" class="editor"></textarea>
</div

我想在图像上获得textarea的id。下面是我的javascript函数

function ViewHtml(id) {
    $("#" + id).siblings('div.collapse first > textarea.editor').val();
}

但上面的代码不起作用。有人可以帮我吗？？

Answer 1

尝试：

function ViewHtml(id) {
   var id = $("#" + id).siblings('div.collapse').children('textarea.editor').prop('id');
}

请参阅jsFiddle。

我建议不要使用onClick。由于你使用的是jQuery，你可以这样做：

$('#img1').click(function() {
    var id = $(this).siblings('div.collapse').children('textarea.editor').prop('id');
});

如果您需要在多张图片上使用此选项，请根据需要调整选择器。

这是假设您选择的div始终相对于图像。如果不是这样，您可以简化和优化它：

$('#img1').click(function() {
    var id = $('.collapse > .editor').prop('id');
});

Answer 2

为什么让你难过？如果你有完全相同的结构，下面只发生一次将帮助你

$('img').on('click', function(){
    var textareaId = $('.collapse textarea').attr('id');
    $('.collapse textarea').val(textareaId);
});

否则，将其全部包装在div

中

<div id="wrapper">
    <img src="Image/icons/preview.png" alt="Preview" id="img1" />
    <a id="ancHeader">Header html</a> 
    <div class="collapse">
        <textarea rows="30" cols="22" id="txtHtmlHead" class="editor"></textarea>
    </div>
</div>

和jQuery

$('#wrapper img').on('click', function (e) {
    var textareaId = $(this).siblings('.collapse').children('textarea').attr('id');
    $('.collapse textarea').val(textareaId);
});

Answer 3

试试这个：

$("#img1").click(function () {
    $(".collapse textarea").attr("id");
});

DEMO

Answer 4

我认为，最好使用元素的数据属性。

<img  src="Image/icons/preview.png" alt="Preview" data-rel="txtHtmlHead1" id="img1"  class="getHtml"/>

<a id="ancHeader" >Header html</a>  

<div class="collapse">
   <textarea rows="30" cols="22" id="txtHtmlHead1" class="editor"></textarea>
</div

只需管理data-rel属性动态。的 txtHtmlHead1

function ViewHtml(id) { $("#" + id).siblings('div.collapse first > textarea.editor').val(); } $(document).ready(function(){ $(".getHtml").bind('click',function(){ var getTextAreaId = $(this).data('rel'); if(getTextAreaId != undefined){ alert($("#"+getTextAreaId).val()); // your output } }); })

我刚刚将您的 ViewHtml 替换为Click事件。

如何在div中获取元素

4 个答案: