Изменение модального заголовка с помощью нажатия кнопки не изменяется

Question

У меня есть несколько кнопок, и при нажатии я запускаю функцию JS, которая получает атрибут значения кнопки и использует его для динамического изменения модального значения на основе атрибута значения кнопки, а затем отображает модальное значение.

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

<button onclick="getAccountType()" class="accs btn btn-success" value="AM">Open Money Market Fund Account</button>
<button onclick="getAccountType()" class="accs btn btn-success" value="AM_WFW">Open Wealth For Women Fund Accont</button>

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="accType" class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria- label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

function getAccountType() {
  var x = document.getElementsByClassName("accs");
  var i;

  for (i = 0; i < x.length; i++) {
    switch (x[i].value) {
      case "AM":
        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Money Market Fund Account");
        $("#regModal").modal('show');
        break;
      case "AM_WFW":

        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Wealth for Women Fund Account");
        $("#regModal").modal('show');
        $('#accType').innerHTML = "";

        break;
    }
  }
}

Answer 1

Если вы хотите использовать значение нажатой кнопки в модальном режиме, я думаю, вы можете сделать это простым способом, как показано ниже:

$(function(){
        $('[data-target="#myModal"]').click(function(){
            var currentText = $(this).text();
            $('.modal-title').text(currentText);
        });
    });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="container">
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal button 1
  </button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open modal button 2
      </button>
    
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

Answer 2

проблема в том, что вы выполняете итерацию в обоих случаях переключения ... когда вы нажимаете кнопку ... это как если бы вы нажимали обе кнопки ... чтобы решить ее, и поскольку вы используете jquery ... вы можете добавить это насобытие функции щелчка ...

 $('.accs').click(function(){
        $('#accType').innerHTML = "";
        $('#accType').text($(this).attr('title'));
        //$("#regModal").modal('show');
        $('#accType').innerHTML = "";
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="accs btn btn-success" value="AM"
title="You are opening a Money Market Fund Account">Open Money Market Fund Account</button>
<button  class="accs btn btn-success" value="AM_WFW"
title="You are opening a Wealth for Women Fund Account">Open Wealth For Women Fund Accont</button>

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="accType" class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria- label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 3

Передать аргумент в getAccountType()

<button onclick="getAccountType('AM')" class="accs btn btn-success" value="AM">Open Money Market Fund Account</button>
<button onclick="getAccountType('AM_WFW')" class="accs btn btn-success" value="AM_WFW">Open Wealth For Women Fund Accont</button>

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="accType" class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria- label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Добавить условие If для accountType аргумент

function getAccountType(accountType) {
    if (accountType == 'AM') {
        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Money Market Fund Account");
        $("#regModal").modal('show');
    } else if (accountType == 'AM_WFW') {
        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Wealth for Women Fund Account");
        $("#regModal").modal('show');
        $('#accType').innerHTML = "";
    }
}

Answer 4

вам нужно использовать $(document).ready(function(){

Итак

$(document).ready(function(){
function getAccountType() {
  var x = document.getElementsByClassName("accs");
  var i;

  for (i = 0; i < x.length; i++) {
    switch (x[i].value) {
      case "AM":
        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Money Market Fund Account");
        $("#regModal").modal('show');
        break;
      case "AM_WFW":

        $('#accType').innerHTML = "";
        $('#accType').text("You are opening a Wealth for Women Fund Account");
        $("#regModal").modal('show');
        $('#accType').innerHTML = "";

        break;
    }
  }
}
}