0

我有一个图像，然后是一个锚点，然后是一个包含 textarea 的 div。如何在单击图像时获取该文本区域的 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

我想在图片点击上获取文本区域的 id。下面是我的 javascript 函数

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

但是上面的代码不起作用。任何人都可以帮助我吗..？

4

4 回答 4

2

尝试：

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');
});
于 2013-09-19T06:18:22.557 回答
0

为什么难为你？如果您具有完全相同的结构并且下面仅出现 1 次将帮助您

$('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);
});
于 2013-09-19T06:17:46.570 回答
0

试试这个：

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

演示

于 2013-09-19T06:22:52.513 回答
-1

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

<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 属性 dynamic 。 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
    }


});
})

我只是通过将其与 Click 事件绑定来替换您的ViewHtml。

于 2013-09-19T06:24:01.973 回答