Verwenden von Javascript, um sich dynamisch auf ein Element zu konzentrieren

Question

In meinem HTML lade ich eine Tabelle unbekannter Elemente mit einer for-Schleife. Jedem Element ist eine Verknüpfung und ein Textfeld zugeordnet. Ich möchte, dass ein Benutzer in der Lage ist, auf den Link zu klicken und dann zur zugehörigen URL weitergeleitet zu werden. Das ist in Ordnung, aber ich möchte auch, dass der Benutzer lange auf das Element (das ein Bild ist) drücken kann und in der Lage sein wird, das Textfeld zu bearbeiten, das gespeichert wird, sobald sie weg von dem Textfeld klicken.

Mein Problem ist, wie jedes Element der Tabelle die gleiche ID/Klassenname hat, wie bekomme ich mein Javascript, nur auf den richtigen Textbereich zu konzentrieren?

Mein Code ...

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

Dies lädt eine HTML-Tabelle mit verschiedenen Bildern und verschiedene einzigartige Links und jeder Bilder Standardnamen in das Textfeld. Das ist in Ordnung ....

Jetzt möchte ich, wenn ein Benutzer Longholds auf dem Bild legt es Fokus auf die Texarea dieses Elements, so dass es bearbeitet werden kann.

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

Dies ist, wie ich überprüfe, ob es lang gedrückt wird.

Dann habe ich die folgenden verschiedenen Möglichkeiten versucht, aber ohne Erfolg, wie bekomme ich den Textbereich mit der Longhold Presse verbunden.

Was passiert, ist es konzentriert sich auf die letzte Textfläche in der Tabelle, unabhängig davon, welche angeklickt wird.

Wäre es eine schlechte Praxis, eine eindeutige ID für jede <a> in der Tabelle zu erstellen, d. H. Aus meiner Datenbank? (Siehe Ich möchte nicht, dass der Benutzer eindeutige IDs sehen kann, die mit den Dateien verknüpft sind)

Jede Hilfe wäre sehr willkommen.

Answer 1

Innerhalb eines jQuery-Ereignishandlers ist this das Element, auf dem das Ereignis aufgetreten ist. Das macht Übergänge zu anderen spezifischen Elementinstanzen relativ einfach.

Sie könnten next() verwenden basierend auf HTML gezeigt

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

Answer 2

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>