Question

我要使用此代码`

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" 
content="width=device-width, 
initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com /bootstrap/3.3.7/css/bootstrap.min.css">
 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>
</head>
<body>

 <div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
 </div>`

要在页面上显示警报，我希望能够使用表单更改警报中显示的文本。

Answer 1

尝试以下代码，希望对您有所帮助：

$(document).ready(function(){

  let text  = $("#text");
  let alert = $("#alert"); 
  
  $("#form").submit(function(e){
    
    e.preventDefault();
    
    // ---------------

    setAlert("success",text.val());
    
    alert.toggleClass('d-none').toggleClass('d-none', 2000);
    
  });
  
  function setAlert(type, value) {
    alert.html(`<b>${type} ! </b> ${value}`);
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="p-4">
  <div id="alert" class="alert alert-success d-none"></div>`
</div>

<form class="form-inline" id="form">
  <div class="form-group mx-sm-3 mb-2">
    <input type="Text" class="form-control" id="text" placeholder="Enter text">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Alert</button>
</form>

使用表格动态更改引导警报的文本

1 个答案: