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。我可以在此代码中添加什么来循环并进行更改？

.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()});

可编辑（jQuery就地编辑器）：如何制作未选中，可编辑的文本

1 个答案: