可編輯（jQuery就地編輯器）：如何使文本沒有被選中，可編輯

Question

我正在做一些試驗（所以下面的代碼有很多我通常不會放進去的東西）。我有一對跨度（具有相同的ID）。在這個例子中，有2個ID = 42和2個ID = 43。目前，當我點擊其中一個ID = 42s的文本時，兩個ID 42都以紅色突出顯示。

使用插件從http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html，我加

$(function(){$('.test').editable()}); 

並允許被選中成爲可編輯的文本。我想要做的是，如果ID = 42被點擊，另一個ID = 42是可編輯的 - 不是被點擊的ID。只會有最多兩個具有相同ID的ID。我可以在此代碼中添加什麼來循環並進行更改？

.selected { color:red; } 

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.editable-1.3.3.js"></script> 

<script type="text/javascript"> 

$(function(){$('.test').editable()}); 

$(".testClass").click(function() { 
    if ($('.testClass').hasClass('selected')) { 
     $('.testClass').removeClass('selected');      
    }   
    var thisTarget = $(this).attr('id');    
    $('#container').find('#'+thisTarget).toggleClass("selected", 1000);    
    return false; 
}); 

</script> 




<p> 
<span id="42" class="testClass">    
    <span class="test">Click me (I need to turn red)</span>  
</span> 
</p> 
<p> 
<span id="43" class="testClass">    
    <span class="test">just another test</span> 
</span>  
</p>   
<p> 
<span id="42" class="testClass">    
    <span class="test">And I become editable</span> 
</span>  
</p>   
<p> 
<span id="43" class="testClass">    
    <span class="test">just another test</span> 
</span>  
</p>    

Answer 1

首先，沒有兩個相同ID的東西。 ID爲總是唯一，這意味着在同一頁上不能有多個名稱相同的頁面。 （我也有點困惑，因爲雖然你說有兩個42和兩個43，實際上在你的代碼中只有一個。確保你明白<span>確實是而不是的ID是42或43 。）PS：ID /類不能以數字開頭。

如果你想點擊.test，然後操作它的父（id=42），這是很簡單的事：

$('.test').click(function(){ 
    var parent = $(this).parent(); 
    // Manipulate the parent (id=42, 43) however you want here 
    parent.css('background', '#000'); 
}); 

我不熟悉你鏈接的插件，但使用這種方法，你應該無論你想要如何操縱父母。不過，我實在不明白怎麼這應該是你的一個問題，因爲你可以很容易的onclick事件附加到id=42，或者你的目的，使用以下命令：

$(function(){$('#42, #43').editable()});