Jquery編輯點擊

我想寫一個jQuery的功能，使文本編輯點擊。Jquery編輯點擊

我想使用數據attr來找到哪個<p>和輸入它應該顯示和隱藏的基礎上，用戶點擊。

我控制檯登錄正確的數據ATTR所以我不明白爲什麼它不會隱藏<p>再展<input>

任何人都可以看到什麼是錯的功能？

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

來源

2016-09-22 jdheimpel

記住[接受]（http://meta.stackexchange.com/a/5235/321253）的作品出來給你答案。隨時提出新的問題。 –

你不應該給一個選擇和自己的屬性之間的空間。

用'p[data-gradeid='代替'p [data-gradeid='。

當您使用空間時，您說data-gradeid的某個元素是p元素的子元素，但情況並非如此。

編輯：

您可以添加enter功能，jQuery庫是這樣的：

$.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事件，如評論中所述。

來源

2016-09-22 22:08:36

謝謝！這似乎工作。但是，現在輸入時保存值的第二個函數並不是。我更新了小提琴：https://jsfiddle.net/jheimpeld2l/se5zgjya/ – jdheimpel

很高興看到它的工作:)你也可以看看[CSS參考]（http://www.w3schools.com/ cssref/css_selectors.asp）。 –

我已將函數改寫爲[在此]（https://jsfiddle.net/se5zgjya/1/）。希望能幫助到你。 –

也許引號$('p [data-gradeid="'+ input + '"]')左右。

來源

2016-09-22 22:12:25

試試這個：

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

來源

2016-09-22 22:15:08 Ehsan

Jquery編輯點擊

回答

相關問題