Использование функции jQuery для нескольких div

Question

У меня есть div, который содержит кнопку с идентификатором.Когда кнопка нажата, она вызывает некоторые функции jQuery.

Я не уверен, как добавить 2-й элемент div, который также содержит кнопку, и разрешить использование функции jQuery любой из них.

Мой HTML:

<div id="box" style="background:rgb(163, 205, 224); color:black; padding:15px;">
  <div id="container">
    <div id="header" style=" border-radius: 5px;">
      <h2>
        IT helpdesk
      </h2>
    </div>
    <div id="content">
      <ul id="favorite-links" style="list-style-type: none; padding:0;">
        <div id="text"></div>
        <li>
          <a href="http://artslab.info">Artslab</a><button class="removebtn">x</button>
        </li>
      </ul>
      <div id="new-link-button">
        <button>Add New Link</button>
      </div>
    </div>
    <div id="add-link-form">
      <label>Title</label><br /><input id="title" placeholder="Title here" /><br /><label>URL</label><br /><input id="url" value="http://" /><br /><button id="add">Save Link</button>
    </div>
  </div>
</div>

Мой JavaScript

$(document).ready(function() {
  var $ul = $('#favorite-links');
  var $title = $('#title');
  var $url = $('#url');
  var $text = $('#text');

  //get items from local storage
  if (localStorage.getItem('vk-links')) {
    $ul.html(localStorage.getItem('vk-links'));
  }

  // add new item
  $('#add').click(function() {

    //add new item
    $('#favorite-links').append('<li><a href="' + $url.val() + '">' + $title.val() + '</a><button class="removebtn">x</button></li>');

    //save changes to local storage
    localStorage.setItem('vk-links', $ul.html());

    //reset form
    $title.val("");
    $url.val("http://");
    $("#add-link-form").slideToggle("100");

  });

  //remove item
  $("#favorite-links").on('click', '.removebtn', function() {
    $(this).parent().remove();
    //save changes to local storage
    localStorage.setItem('vk-links', $ul.html());
  });

  //form toggle
  $("#new-link-button").click(function() {
    $("#add-link-form").slideToggle("100");
  });


  // reuse the same code for other div element such as the box 
  $("button").each(function(index) {
    //document
  });

});

Я сделал jsFiddle здесь и был бы очень признателен за любую помощь:

https://jsfiddle.net/shezellfoster/9xecvqd4/

Answer 1

Поскольку ваш код довольно большой, я немного облегчил чтение примера концепции.

• Сначала вы будете использовать селекторы классов вместо селекторов идентификаторов, чтобы вы могли запрашивать несколько элементов.Идентификатор должен быть уникальным (поэтому измените его в своем html, если вы копируете div).
• Теперь мы можем использовать селектор класса, чтобы назначить элемент click всем кнопкам.
• Внутри функции обработчика мы используем переменную this для получения текущей нажатой кнопки.
• Мы смотрим, в каком контейнере находится эта кнопка, и находим здесь элемент p, который нужно изменить.текст.

$('.change').on('click', function(){
  $(this).closest('.container').find('p').text('text changed');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container1" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

<div id="container2" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

<div id="container3" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

Если вы хотите добавить несколько контейнеров динамически, вам нужно будет использовать делегирование событий.(или используйте clone(true), но давайте забудем об этом сейчас)

$('#dynamic_content').on('click', '.container', function() {
  $(this).closest('.container').find('p').text('text changed');
});

$('#clone').on('click', function() {
  $('#dynamic_content').children('.container').first().clone().appendTo('#dynamic_content');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_content">
  <div class="container">
    <p>Change this text</p>
    <button class="change">Change</button>
  </div>
</div>
<br />
<button id="clone">clone</button>