Не могу найти ближайший элемент

Question

Когда я нажимаю на кнопку, она должна найти раскрывающийся список, а затем должна получить текст выбранной опции из раскрывающегося списка, но она не может найти поле ввода с классом Tasktitle. После обновления заголовка он должен получить текст из выпадающего списка. Может ли кто-нибудь помочь мне?

HTML

<div class="card">
    <a href="#" onclick="OpenCloseSections(this); return false;" class="panel panel-info">
        <div class="card-header">
            <input type="text" name="name" class="Tasktitle" value="On hold" />  <-- Find & update this element
        </div>
    </a>
    <div class="panel-body Panel">
        <div id="cdbodytwo" class="card-body">
            <div class="panel-body PanelChild">

                <div id="cdbodytwo" class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <button type="button" onclick="UpdateOpgaveStatus(this);" >Update status</button>
                                <select class="opgavestatus">
                                    <option value="">I gang</option>
                                    <option value="1">Venter på vare</option>
                                    <option value="2">Venter på svar</option>
                                    <option value="3">På hold</option>
                                    <option value="4">I gang</option>
                                    <option value="5">Færdig</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

JavaScript

function UpdateOpgaveStatus(element) {

    var GetStatusText = $(element).closest('div').find('.opgavestatus option:selected').text();
    var FindTitle = $(element).closest('div').find('.Tasktitle');

    $.ajax({
        type: 'POST',
        url: "/User/UpdateOpgaveStatus",
        data: {},

        success: function (result) {
            FindTitle.html(GetStatusText); 
        },
        error: function () {
            alert("Error");
        }
    });

}

Answer 1

Проблема в том, что $(this).closest('div') получает родительский div, который не содержит элемент .TaskTitle. Вместо этого вам нужно получить элемент .card и find() внутри него:

var FindTitle = $(element).closest('.card').find('.Tasktitle');

Кроме того, это элемент input, поэтому для его обновления необходимо использовать val(), а не html():

FindTitle.val(GetStatusText); 

Стоит также отметить, что элементы уровня блока, такие как div, не должны размещаться внутри встроенных элементов, таких как a. Кроме того, встроенные обработчики событий больше не являются хорошей практикой, и их следует избегать. Поскольку вы уже загрузили jQuery на страницу, вы можете использовать ее, чтобы незаметно прикреплять обработчики событий, что-то вроде этого:

<div class="card">
  <div class="card-header">
    <input type="text" name="name" class="Tasktitle" value="On hold" />
  </div>
  <div class="panel-body Panel">
    <div id="cdbodytwo" class="card-body">
      <div class="panel-body PanelChild">
        <div id="cdbodytwo" class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <button type="button">Update status</button>
                <select class="opgavestatus">
                  <option value="">I gang</option>
                  <option value="1">Venter på vare</option>
                  <option value="2">Venter på svar</option>
                  <option value="3">På hold</option>
                  <option value="4">I gang</option>
                  <option value="5">Færdig</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery($ => {
  $('.card-header').on('click', function() {
    OpenCloseSections(this);
  });

  $('.card-body button').on('click', function() {
    let $button = $(this);
    var statusText = $button.closest('div').find('.opgavestatus option:selected').text();
    var title = $button.closest('.card').find('.Tasktitle');

    $.ajax({
      type: 'POST',
      url: "/User/UpdateOpgaveStatus",
      success: function(result) {
        title.html(statusText);
      },
      error: function() {
        alert("Error");
      }
    });
  });
});