Изменение значения div при изменении входного значения. Несколько изменений на одной странице

Question

У меня есть несколько входов с кнопкой сохранения, каждое из которых должно обновлять другие DIV, которые содержат тот же идентификатор в атрибуте id. На данный момент я могу изменить значение только тогда, когда даю точный идентификатор с Jquery.

Как я могу изменить только значение, которое находится в том же нажатом родительском div?

HTML

    <div>
  <input type="text" id="newbud-2508891" value="10.00" required="" class="form-control border-0">
  <a id="newbudbtn-2508891" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;" onClick="showMessage()">SAVE</a>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508891" style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);">$10.00</div>
  </div>
</div>

<div>
  <input type="text" id="newbud-2508892" value="10.00" required="" class="form-control border-0">
  <a id="newbudbtn-2508892" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;" onClick="showMessage()">SAVE</a>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508892" style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);">$10.00</div>
  </div>
</div>

JQuery

function showMessage() {
    var message = jQuery("#newbud-2508891").val();
    jQuery("#bud-2508891").text(message);
}

JSFIDDLE

РЕДАКТИРОВАТЬ: Как вести себя одинаково для обоих родительских DIV с одинаковым кодом JQuery. На данный момент я должен дать точный идентификатор ввода и результат DIV в коде. Есть ли способ получить код, который не требует идентификаторов, и изменить оба результата DIV при изменении соответствующего ввода?

Answer 1

Если вы используете jQuery, вам не нужно использовать атрибут onClick в тегах html. Далее вы можете использовать селекторы типа [attribute^=value] , чтобы получить элементы, атрибуты которых начинаются с заданных значений . Попробуйте что-то вроде этого примера:

$(document).ready(function() {

  $('*[id^="newbudbtn-"]').on('click', showMessage);

  function showMessage(event) {
    var elem = $(event.target);
    var id = elem.attr('id').replace('newbudbtn-', '');

    var source = $('#newbud-' + id)
    var target = $('#bud-' + id);

    if (source.length && target.length) {
      target.text('$' + source.val());
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="text" id="newbud-2508891" value="10.00" required="" class="form-control border-0">
  <a id="newbudbtn-2508891" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;">SAVE</a>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508891" style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);"></div>
  </div>
</div>

<div>
  <input type="text" id="newbud-2508892" value="10.00" required="" class="form-control border-0">
  <a id="newbudbtn-2508892" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;">SAVE</a>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508892" style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);"></div>
  </div>
</div>

Answer 2

Я думаю, что вам лучше будет использовать классы, а затем выполнять запросы на основе иерархии.

Вот мой пример: Fiddle

function showMessage(e) {
	// We get the parent of the button that clicked it
	var node = e.parentNode;
  
  // Get initial value from sibling input
  var initialValue = node.querySelector("INPUT").value;
  
  
	// We query each of the elements in that container
  var elements = node.querySelectorAll(".text-change");
	elements.forEach( el =>
  {
  	el.innerHTML = initialValue; 
  });
  
}

<div>
  <input type="text" value="10.00" required="" class="form-control border-0 text-change">
  <button id="newbudbtn-2508891" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;" onClick="showMessage(this)">SAVE</button>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508891" class="text-change" style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);">$10.00</div>
  </div>
</div>

<div>
  <input type="text" id="newbud-2508892" value="10.00" required="" class="form-control border-0 text-change">
  <button id="newbudbtn-2508892" class="btn btn-sm text-info bgbtb" style="color: white !important; background-color: #007bff;" onClick="showMessage(this)">SAVE</button>
  <div data-toggle="dropdown" aria-expanded="false">
    <div id="bud-2508892" class="text-change style="border-bottom: 2px solid #bdbdbd;display: inline-block;color: rgb(189, 189, 189);">$10.00</div>
  </div>
</div>

Answer 3

вы можете прослушать событие (цель - это выбранный вами div)

function showMessage(event)
{
    console.log(event.target)
}

Надеюсь, это поможет.