Question

我有几个按钮，单击后会触发一个JS函数，该函数获取按钮的value属性，并使用它根据按钮的value属性动态更改模式，然后显示模式。

现在的问题是，当我第一次单击该按钮时，它可以工作，但是单击其他按钮仍然显示上一次单击按钮时的标题。

<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

您需要使用$(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;
    }
  }
}
}

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>

为accountType参数添加If条件

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

如果您想在模式中使用clicked按钮的值，那么我认为您可以通过以下简单方法来做到这一点：

$(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 5

我不知道为什么，但是使用$('#accType.modal-title')作为选择器，直到今天我才遇到类似的事情。

此外，您不能将innerHtml与jquery这样的$('#accType.modal-title').html('');

一起使用

通过单击按钮更改模态标题不变

5 个答案: