javascript - How can I edit the div that is clicked when all other divs have the same className?

How can I access the div which is currently clicked, when all the divs have the same name? innerNote contains the text of each note. Each note is made up of a parent div and a child div (innerNote), which are created dynamically.

When I have multiple notes and click on the edit icon of a single note and save changes, all the notes get added with the same text. Is there a way I can edit the text of only the clicked div rather than all the divs?

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';
  
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;
  
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
    edit.addEventListener('click', () => {
      textArea2.value = text;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      let currentDiv = innerNote;
      currentDiv.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 600px;
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href=".5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';
  
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;
  
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
    edit.addEventListener('click', () => {
      textArea2.value = text;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      let currentDiv = innerNote;
      currentDiv.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 600px;
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>

Share Improve this question edited Mar 3 at 9:26 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Mar 3 at 9:19 user28930912

you may use a html5 template element developer.mozilla./en-US/docs/Web/HTML/Element/template – Mister Jojo Commented Mar 3 at 11:50

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

You need to delegate

I had to comment out the container height to make the box visible in viewport

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {
  let note = document.createElement('div');
  note.className = 'note';

  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;

  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';

  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';

  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
  }
});


editBtn.addEventListener('click', () => {
  currentDiv.textContent = textArea2.value;
  editNote.style.display = 'none';
})


container.addEventListener('click', (e) => {
  const tgt = e.target;
  if (!tgt | (!tgt.matches('.fa-edit') && !tgt.matches('.fa-trash'))) return;

  const parent = tgt.closest('div.note');
  if (tgt.matches('.fa-edit')) {
    currentDiv = parent.querySelector('.inner-note');
    textArea2.value = currentDiv.textContent;
    editNote.style.display = 'block';
  }
  if (tgt.matches('.fa-trash')) {
    container.removeChild(parent);
  }
})
closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
/*   height: 600px; */
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="create-note">
    <h1 class="heading">New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class="create-btn">Create Note</button>
    <button class="close-btn">Close</button>
  </div>
  <div class="edit-note">
    <h1 class="heading">Edit Note</h1>
    <textarea name="" id="" class="textarea2"></textarea>
    <button class="edit-btn">Edit Note</button>
    <button class="close-btn2">Close</button>
  </div>
</div>

The idea with a class name is that it represent CSS styles that can be applied throughout the document. Don't use class names in the context of the functional requirements (or whatever we can call it).

I will suggest that you make more use of forms, form fields and the name attribute. The name attribute on a form, a form field or button does not have to be unique across the document. As an example, the delete button for each note can have the same name: "delete". So, if you listen for click event on the container (div.container) (event delegation) you can test if the event target was a delete button, and then delete the form (aka. the note) element related to that delete button.

In the example I also changed the create and edit "modals" to <dialog>. I think that they are quite handy in a use case like this.

const add_btn = document.querySelector('.add');
const container = document.querySelector('.container');
const create_dialog = document.getElementById('create_dialog');
const create_form = document.forms.create;
const edit_dialog = document.getElementById('edit_dialog');
const edit_form = document.forms.edit;

add_btn.addEventListener('click', e => {
  create_dialog.showModal();
});

container.addEventListener('click', e => {
  switch (e.target.name) {
    case 'edit':
      edit_form.text.value = e.target.form.text.value;
      edit_form.currentNote = e.target.form;
      edit_dialog.showModal();
      break;
    case 'delete':
      e.target.form.remove();
      break;
  }
});

create_dialog.addEventListener('close', e => {
  switch (e.target.returnValue) {
    case 'create':
      if (create_form.text.value) createNote(create_form.text.value);
    default:
      create_form.reset();
  }
});

edit_dialog.addEventListener('close', e => {
  switch (e.target.returnValue) {
    case 'update':
      edit_form.currentNote.text.value = edit_form.text.value;
    default:
      edit_form.reset();
      edit_form.currentNote = null;
  }
});

function createNote(text) {
  let note = document.createElement('form');
  note.className = 'note';

  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  innerNote.textContent = text;

  let textarea = document.createElement('textarea');
  textarea.name = 'text';
  textarea.disabled = true;
  textarea.className = 'inner-note';
  textarea.value = text;

  let edit = document.createElement('button');
  edit.name = 'edit';
  edit.type = 'button';
  edit.className = 'fa-solid fa-edit';

  let del = document.createElement('button');
  del.name = 'delete';
  del.type = 'button';
  del.className = 'fa-solid fa-trash';

  note.appendChild(textarea);
  note.appendChild(edit);
  note.appendChild(del);
  container.appendChild(note);
  note.style.display = 'block';
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

.textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
  background: none;
  border: none;
  resize: none;
}

.fa-solid.fa-edit {
  margin-left: 94px;
}

.fa-solid.fa-trash {
  margin-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
  <div class="add">
    <i class="fa-solid fa-plus"></i>
  </div>
</div>

<dialog id="create_dialog">
  <h1 class="heading">New Note</h1>
  <form name="create" method="dialog">
    <textarea name="text" class="textarea" placeholder="Enter your note..."></textarea>
    <button class="create-btn" value="create">Create Note</button>
    <button class="close-btn" value="close">Close</button>
  </form>
</dialog>
<dialog id="edit_dialog">
  <h1 class="heading">Edit Note</h1>
  <form name="edit" method="dialog">
    <textarea name="text" placeholder="Enter your note..."></textarea>
    <button class="edit-btn" value="update">Update Note</button>
    <button class="close-btn" value="close">Close</button>
  </form>
</dialog>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I edit the div that is clicked when all other divs have the same className? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)