编辑列表中的相应元素

-1

我正在制作2个列表。男孩和女孩名单。该按钮为每个按钮创建新的元素。所以我想当我点击例如boy1元素。编辑girl1元素。并将颜色更改为黑色。当我点击男孩2编辑girl2等。这是我的HTML编辑列表中的相应元素

<div class="mainDiv"> 
<input type="button" value="Add new" id="clickme"onclick="addElements()"> 
    <ul id="boys"> 
     <li id="boy1">Boy1</li> 
    </ul> 

    <ul id="girls"> 
     <li id="girl1">Girl 1</li> 
    </ul> 
</div>

的CSS

#boys { 
    color:red; 
} 
#girls { 
    color:blue; 
} 
li { 
    cursor:pointer; 
}

和JavaScript

var i = 1; 
    $("#clickme").click(function() { 
     i++ 
     $("#boys").append("<li id='boy" + i+"'>Boy"+ i +"</li>"); 
      $("#girls").append("<li id='girl" + i+"'>Girl"+ i +"</li>") 
    });

结果的例子应该是这样的

来源

2016-08-12 Shkelqim Maxharraj

听起来容易，但请解释这更多=>当我点击例如请分享帮助元素。编辑girl1元素。并将颜色更改为黑色。当我点击男孩2编辑girl2 ,,通常你点击你想编辑的w元素，而不是点击一个元素并编辑另一个元素 –

是的，但我想编辑各自的元素。例如$（“＃boy1）.click（function（）{$（”＃girl1）.css（“color”，“black”）}），就像这样。我想为所有元素做到这一点。是否清楚 –

确定清楚，等待一秒plz –

，您需要在父DIV委托事件：

$(function() { 
 
    var i = 1; 
 
    $("#clickme").click(function() { 
 
    i++ 
 
    $("#boys").append("<li id='boy" + i+"'>Boy"+ i +"</li>"); 
 
    $("#girls").append("<li id='girl" + i+"'>Girl"+ i +"</li>") 
 
    }); 
 
    
 
    // attach event handler for all li elements: also for 
 
    // the one created dynamically 
 
    $('div.mainDiv').on('click', 'li', function(e){ 
 
    if (this.id.indexOf('boy') != -1) { 
 
     $('#girl' + this.id.substr(3)).css("color", "black"); 
 
    } else { 
 
     $('#boy' + this.id.substr(4)).css("color", "black"); 
 
    } 
 
    }); 
 
});

#boys { 
 
    color:red; 
 
} 
 
#girls { 
 
    color:blue; 
 
} 
 
li { 
 
    cursor:pointer; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="mainDiv"> 
 
    <input type="button" value="Add new" id="clickme"> 
 
    <ul id="boys"> 
 
     <li id="boy1">Boy1</li> 
 
    </ul> 
 

 
    <ul id="girls"> 
 
     <li id="girl1">Girl1</li> 
 
    </ul> 
 
</div>

来源

2016-08-12 20:56:59 gaetanoM

看看兄弟。我不想改变点击元素的颜色。我想改变各自的颜色。所以如果我点击boy1。改变女孩的颜色1.是否清楚 –

@ShkelqimMaxharraj对不起，更新了片段。让我知道。 – gaetanoM

而这一个只是....真棒。谢谢你的支持 –

请检查它可能对你有帮助。

$(document).ready(function() { 
 
    var i = 1; 
 
    $("#clickme").click(function() { 
 
    i++ 
 
    $("#boys").append("<li id='boy" + i + "' onclick='fnEdit(id)'>Boy" + i + "</li>"); 
 
    $("#girls").append("<li id='girl" + i + "'>Girl" + i + "</li>") 
 
    }); 
 
}); 
 

 
function fnEdit(id) { 
 
    var sBoyId = id.toString(); 
 
    var genId = sBoyId.replace(/boy/g, ''); 
 
    $("#" + id).siblings().removeClass("selected"); 
 
    $("#" + id).addClass("selected"); 
 
    $("#girl" + genId).siblings().removeClass("selected"); 
 
    $("#girl" + genId).addClass("selected").attr("contenteditable", "true"); 
 

 
}

#boys { 
 
    color:red; 
 
} 
 
#girls { 
 
    color:blue; 
 
} 
 
li { 
 
    cursor:pointer; 
 
} 
 
.selected{ 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
<input type="button" value="Add new" id="clickme"> 
 
<ul id="boys"> 
 
    <li id="boy1" onclick="fnEdit(id)">Boy1</li> 
 
</ul> 
 

 
<ul id="girls"> 
 
    <li id="girl1">Girl 1</li> 
 
</ul>

来源

2016-08-12 21:51:38

希望你看到了答案@Shkelqim Maxharraj。请让我知道，如果你仍然需要任何额外的功能。 –

编辑列表中的相应元素

回答

相关问题