Question

在我的HTML中，我使用for循环加载一个包含未知元素的表。每个元素都有一个与之关联的链接以及一个textarea。我希望用户能够单击该链接，然后重定向到关联的URL。这很好，但我也希望用户能够长按元素（这是一个图像）并能够编辑textarea，一旦他们点击文本区域就会保存。

我的问题是，表格的每个元素都有相同的id / classname，如何让我的javascript专注于正确的textarea？

我的代码......

 <g:each in="${files}" var="d">         
            <a class = "file" href="${d.uniquelink}" ><image id = "fileIcon"  src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px"/>
                <textarea class="captionText" rows="1">${d.name}</textarea>
            </a>   
        </g:each>

这会在textarea中加载一个html表，其中包含不同的图像和不同的唯一链接以及每个图像名称。这很好......

现在我希望当用户在图像上使用时，它会将焦点放在该元素的texarea上，以便进行编辑。

 $('.file').mousedown(function() {
            timeoutId = setTimeout(myFunction, 1000);
        }).bind('mouseup mouseleave', function() {
            clearTimeout(timeoutId);
        });

我正在检查是否有长篇大论。

然后我尝试了以下各种方法，但无济于事，我如何得到与长轴印刷机相关的textarea。

 function myFunction(focused){
      //      var focusedElement = document.activeElement;
       //     document.getElementsByClassName(".captionText").focus();
         //   $(".captionText").focus();
        //       .focus();
          //window.alert(focusedElement.tagName);
       }

无论点击哪一个，它都会关注表格中的最后一个textarea。

为表格中的每个<a>创建一个唯一的ID是不好的做法，即从我的数据库中创建？（请参阅我不希望用户能够看到与文件关联的唯一ID）

非常感谢任何帮助。

Answer 1

var timeoutId;
$('.file').mousedown(function() {
   var $link = $(this);
   var $textArea = $('.captionText', $link);
   timeoutId = setTimeout(function() {
     doFocus($textArea);
   }, 1000);
}).bind('mouseup mouseleave', function() {
   clearTimeout(timeoutId);
});


function doFocus($textArea){
  $textArea.focus();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class = "file" href="#" ><image id = "fileIcon"  src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-64.png" width="100px" height="100px"/>
     <textarea class="captionText" rows="1">First Text </textarea>
</a> 

<br/>
<a class = "file" href="#" ><image id = "fileIcon"  src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/jpgs-64.png" width="100px" height="100px"/>
    <textarea class="captionText" rows="1">Second Text </textarea>
</a>

Answer 2

在jQuery事件处理程序中，this是事件发生的元素。这使得遍历其他特定元素实例变得相对简单。

您可以根据显示的html使用next()

var timeoutId;
$('.file').mousedown(function() {
  var $textArea = $(this).next();
  timeoutId = setTimeout(function() {
    myFunction($textArea);
  }, 1000);
}).bind('mouseup mouseleave', function() {
  clearTimeout(timeoutId);
});

function myFunction($textArea){
  $textArea.focus()
}

使用javascript动态关注元素

2 个答案: