javascript - 编辑列表中的相应元素

Question

我正在制作 2 个列表。男孩和女孩名单。该按钮为每个创建新元素。当我单击例如 boy1 元素时，我想要。编辑 girl1 元素。并将颜色更改为黑色。当我点击 boy 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>")
  });

结果的例子应该是这样的

Answer 1

您需要在父 div 上委托(delegate)事件:

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