이전 요소를 동적으로 가져온 다음 jQuery를 클릭하십시오.

Question

PHP에서 foreach 루프를 사용하여 클래스 이름이 동적으로 생성 된 링크 및 버튼 목록이 있습니다. 예제 출력은 다음과 같습니다

<a class="edit-url-9rwpaZV" href="page/1">This is my title</a> 
<button class="edit-btn-9rwpaZV" data-text-swap="Save">Edit</button> 

<a class="edit-url-5R8eBR2M" href="page/2">Why tea is great</a> 
<button class="edit-btn-5R8eBR2M" data-text-swap="Save">Edit</button> 

<a class="edit-url-V7Ma8Olb" href="page/3">Fish are friends</a> 
<button class="edit-btn-V7Ma8Olb" data-text-swap="Save">Edit</button> 

나는 "편집"버튼을 그래서 링크의 텍스트를 편집하고 아약스를 통해 저장할 수 있습니다 눌러도 전원이 화재의 jQuery 기능을 가지고 있습니다. 나는 그것이 모든 ".edit-URL을 만든 어떤 버튼을 클릭 (I 각 클래스 이름에 고유 한 식별자를 추가하기 전에) 이전

$(document).ready(function(){ 
    editing=false; 
    c = $(".edit-url"); 
    b = $(".edit-btn").click(toggle_edit); 
    toggle_edit(); 
}); 

function toggle_edit() 
{ 
    switch(editing){ 
    case true: 
     c.get(0).contentEditable = true; 
     c.css({background:"#eeeeee"}); 
     editing=false; 
    break; 
    case false: 
     c.get(0).contentEditable = false; 
     c.css({background:"white"}); 
     editing=true; 
    break; 
    } 
} 

:

이러한 기능의 예는 너무 비슷 "링크를 편집 할 수 있지만 모든 필드를 편집 할 수 없도록하려는 경우 각 버튼의 왼쪽에있는 필드 만 편집 가능하도록해야합니다 (예 : 한 필드 만).

와일드 카드/변수를 셀렉터에 어떻게 추가 할 수 있습니까? 예를 들어 "edit-btn-V7Ma8Olb"을 클릭하면 "edit-url-V7Ma8Olb"필드가 만들어집니다. 편집 가능하고 다른 모든 필드가 아닌가요?

솔루션

는 (사용하여 종료) 이전 등 아래에 제안했다. http://jsfiddle.net/1yncv6rf/3/

$(document).ready(function(){ 
    var editable=1; 
    $(".edit-btn").click(function(){ 
     if(editable == 1){ 
      $(this).prev().attr('contenteditable','true'); 
      return editable=2; 
     } else if(editable == 2) { 
       $(this).prev().attr('contenteditable','false'); 
       return editable=1; 
     } 
    }); 
}); 

Answer 1

당신은 jQuery.prev() 사용할 수 있습니다

$(document).ready(function(){ 
    editing=false; 
    c = $(".edit-url"); 
    b = $(".edit-btn").click(function(){ 
     var elementToEdit = $(this).prev(); 
     switch(editing){ 
      case true: 
      elementToEdit.contentEditable = true; 
      elementToEdit.css({background:"#eeeeee"}); 
      editing=false; 
     break; 
     case false: 
      elementToEdit.contentEditable = false; 
      elementToEdit.css({background:"white"}); 
      editing=true; 
     break; 
    }); 
}); 

Answer 2

을 나가의 조금을 수행 할 선호 $ (this) 셀렉터 jquery에 대한 연구로 cilcked 버튼 만 가져온 다음 상대 $를 찾습니다 (". edit-url"). jquery.previous를 사용하는 DOM 객체.