可編輯（jQuery Inplace Editor）：如何使未選中的文本可編輯

Question

我正在做一些實驗（因此下面的代碼有很多我通常不會放的東西）。 我有一對跨度（具有相同的ID）。 在此示例中，有2個ID = 42和2個ID = 43。 當前，當我單擊ID = 42之一的文本時，兩個ID 42均以紅色突出顯示。

使用來自http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html的插件，我添加了

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

這樣一來，選定的文本就可以編輯。 我想做的是，如果單擊ID = 42，另一個ID = 42是可編輯的-而不是單擊的那個。 最多將有兩個具有相同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 始終是唯一的，這意味着在同一名稱相同的頁面上不能有多個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()});