Question

我需要在特定的div，class或id中显示toastr消息。默认情况下它是正文。我发现我需要改变目标。但我似乎无法使其发挥作用。

比如说我想在这个div中显示toastr：

<showerror> </showerror>

这是我正在使用的代码：

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false, 
    "progressBar": false, 
    "positionClass": "toast-top-right",
    "preventDuplicates": false, 
    "onclick": null,
    "showDuration": "300", 
    "hideDuration": "1000", 
    "timeOut": "5000", 
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
};

$('#submitform').submit(function(e){
    e.preventDefault(); 
    console.log($('#ques1').val());
    if($('#ques1').val()==null){
        toastr.error('Please select a question', 'Error!');
   }
});

有人可以帮忙。

Answer 1

只需在toastr.options

内设置新的班级名称

toastr.options = { 
    ....
    "positionClass": "your-classname-here",
    ....
};

即可

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="content">
  <p>content content content content content</p>
  <div class="collapse" id="first">
    <p>hidden content hidden content hidden content hidden content</p>
  </div>
  <button type="button" class="btn" data-toggle="collapse" data-target="#first">More</button>
</div>
<div class="content">
  <p>content content content content content</p>
  <div class="collapse" id="second">
    <p>hidden content hidden content hidden content hidden content</p>
  </div>
  <button type="button" class="btn" data-toggle="collapse" data-target="#second">More</button>
</div>
<div class="content">
  <p>content content content content content</p>
  <div class="collapse" id="third">
    <p>hidden content hidden content hidden content hidden content</p>
  </div>
  <button type="button" class="btn" data-toggle="collapse" data-target="#third">More</button>
</div>

这是一个Fiddle

在特定div中显示toastr

1 个答案: