클릭시 Jquery 편집

Question

클릭 할 때 텍스트를 편집 할 수 있도록 jquery 함수를 작성하려고합니다.

저는 데이터 attr을 사용하여 어느 <p>을 찾고 사용자가 클릭 한 위치에 따라 표시하고 숨길 지 확인하려고합니다. 나는 그것이 <p>을 숨길 이유를 참조하고이 <input>

이

사람이 기능에 어떤 문제가 있는지 볼 수 표시되지 수

나는 콘솔은 올바른 데이터 ATTR를 기록했습니다?

 <p class="editbox" data-gradeid="1">Original text</p> 
<input data-gradeid="1"> 

<p class="editbox" data-gradeid="2">Original text</p> 
<input data-gradeid="2"> 


$('p').click(function() { 
     var input = $(this).attr("data-gradeid"); 
     console.log(input); 
     // $('p').hide(); 
     $('p [data-gradeid='+ input + ']').hide(); 
     $('input [data-gradeid='+ input +']').show(); 
    });. 

https://jsfiddle.net/jheimpeld2l/3oexm0m5/

Answer 1

당신이 선택하고 자신의 속성 사이의 공간을 제공해서는 안된다.

'p [data-gradeid='을 'p[data-gradeid='으로 바꿉니다.

공백을 사용하면 data-gradeid의 일부 요소는 p 요소의 하위 요소이며, 그렇지 않은 경우가 있습니다.

---

편집 :

당신은 jQuery 라이브러리에이 방법 enter 기능을 추가 할 수 있습니다

이

$.fn.enter = function(fx) { 
    $(this).keypress(function(e) { 
     e.keyCode === 13 && fx.apply(this); 
    }); 
}; 

그런 성능을 찾고 당신이 $.each()을 사용할 수 있습니다 및 저장 각 $p 및 $input DOM 처리를 피하기위한 요소들 :

$('p[data-gradeid]').each(function() { 
    var $p = $(this); 
    var gradeid = $p.data('gradeid'); 
    var $input = $('input[data-gradeid=' + gradeid + ']'); 

    $p.click(function() { 
     $p.hide(); 
     $input.val($p.html()).show().focus(); 
    }); 

    $input.enter(function() { 
     $input.hide(); 
     $p.html($input.val()).show(); 
    }); 
}); 

여기는 working fiddle입니다.

그러나 의견에 명시된대로 blur 이벤트를 사용하는 것이 좋습니다.

Answer 2

$('p [data-gradeid="'+ input + '"]') 주위의 따옴표가있을 수 있습니다.

Answer 3

이 시도 :

$(document).ready(function() { 
 
    
 
    $('p').click(function() { 
 
     var input = $(this).attr("data-gradeid"); 
 
     console.log(input); 
 
     // $('p').hide(); 
 
     $('p[data-gradeid='+ input + ']').hide(1000); 
 
     $('input [data-gradeid='+ input +']').show(); 
 
     
 
    }) 
 
    
 
    $("input").keypress(function(event) { 
 
    if (event.which == 13) { 
 
     $(this).prev("p").show(1000).text($(this).val()); 
 
     $($(this)).hide(); 
 
    } 
 
     
 
    }) 
 
    
 
})

<p class="editbox" data-gradeid="1">Original text</p> 
 
<input data-gradeid="1"> 
 

 
<p class="editbox" data-gradeid="2">Original text</p> 
 
<input data-gradeid="2"> 
 

 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>