Question

我只是在满足两个条件时才尝试在模态中显示表单。如果条件不满足，我会显示其他内容。这里奇怪的是，如果我先点击dev块，我可以看到Hello。但是，每当我首先单击social块，然后返回到单击dev块之后，表单就会显示出来。我该怎么做才能解决这个问题？

修改正如Mark所建议的那样，我重现了我的程序中所感受到的相同行为。无论条件如何，您点击信息的任何块都将显示。如果您点击social数据块，则只能看到该表单，当您点击dev数据块时，您应该只看到Hello.

HTML

$(document).ready(function() {
  $('.click-me').click(function(e) {
    e.preventDefault();

    //show modal
    $('.servicemodal').modal('show');

    //get variables
    var socialmediastatus = $(this).attr("socialmediastatus");
    var webstatus = $(this).attr("webstatus");

    //condition
    if (socialmediastatus === 'Not Active' && webstatus === 'social') {

      //show form
      $(".socialmediaform").show();

    } else {
      //append message
      $(".services").append("Hello.");
    }

  });

});

.click-me {
  border: lime solid 5px;
  margin: 1%;
  width: 50%;
}


/*to show up*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div webstatus="dev" socialmediastatus="Active" class="click-me">Dev</div>
<div webstatus="social" socialmediastatus="Not Active" class="click-me">Social</div>

<!--Modal -->
<div class="modal fade servicemodal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="services">
          <form style="display:none;" class="socialmediaform" method="POST" action="">
            <input value="" name="first_name" placeholder="please enter your name" class="form-control socialforminput">
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>

Answer 1

为什么不将消息添加到div中并根据条件显示/隐藏？如下所示：

＆＃13;

$(document).ready(function() {
  $('.click-me').click(function(e) {
    e.preventDefault();

    //show modal
    $('.servicemodal').modal('show');

    //get variables
    var socialmediastatus = $(this).attr("socialmediastatus");
    var webstatus = $(this).attr("webstatus");

    //condition
    if (socialmediastatus === 'Not Active' && webstatus === 'social') {

      //show form
      $(".socialmediaform").show();
       $(".devContent").hide();

    } else {
      //append message
      $(".devContent").show();
       $(".socialmediaform").hide();
    }

  });

});

＆＃13;

.click-me {
  border: lime solid 5px;
  margin: 1%;
  width: 50%;
}


/*to show up*/

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
     
 <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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
<div webstatus="dev" socialmediastatus="Active" class="click-me">Dev</div>
<div webstatus="social" socialmediastatus="Not Active" class="click-me">Social</div>

<!--Modal -->
<div class="modal fade servicemodal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="services">
        <form style="display:none;" class="socialmediaform" method="POST" action="">
        <input value="" name="first_name" placeholder="please enter your name" class="form-control socialforminput">
        </form>
        <div class="devContent" style="display:none;" > Hello. </dev>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>

＆＃13;

Answer 2

您应该创建一个函数来清除表单，并在关闭模式时附加“Hello”，以便下次触发它时不会显示。

我已将您的追加代码更改为

$(".services").append("<span class='hellotext'>Hello.</span>");

为隐藏模态触发器添加此附加功能：

$('.servicemodal').on('hidden.bs.modal', function (e) { $(".socialmediaform").hide(); $(".hellotext").remove(); })

您的整个代码将如下所示：

$(document).ready(function() {
  $('.click-me').click(function(e) {
    e.preventDefault();

    //show modal
    $('.servicemodal').modal('show');

    //get variables
    var socialmediastatus = $(this).attr("socialmediastatus");
    var webstatus = $(this).attr("webstatus");

    //condition
    if (socialmediastatus === 'Not Active' && webstatus === 'social') {

      //show form
      $(".socialmediaform").show();

    } else {
      //append message
      $(".services").append("<span class='hellotext'>Hello.</span>");
    }

    $('.servicemodal').on('hidden.bs.modal', function (e) {
        $(".socialmediaform").hide();
        $(".hellotext").remove();
    });

  });
});

检查Bootstrap文档作为参考： https://getbootstrap.com/docs/4.0/components/modal/

Answer 3

一旦你附加到你的模态，你就不会清除它;随后还会附加更多文字。

最好显示/隐藏文本或删除文本，方法是将其放在带有类的span中并删除它。相同的基本标记在任何一种方式都有效，因此我将显示/隐藏以避免追加到DOM重新流动的挑战。

注意我也将show / hide模式移到最后以避免＆＃34; flash＆＃34;在某些浏览器中有时出现的视觉效果。

＆＃13;

$(document).ready(function() {
  $('.click-me').click(function(e) {
    e.preventDefault();
    //get variables
    var socialmediastatus = $(this).attr("socialmediastatus");
    var webstatus = $(this).attr("webstatus");
    let isSocial = (socialmediastatus === 'Not Active' && webstatus === 'social');
    //show form
    $(".socialmediaform").toggle(isSocial);
    $(".services-text").toggle(!isSocial);
    //show modal
    $('.servicemodal').modal('show');
  });

});

＆＃13;

.click-me {
  border: lime solid 5px;
  margin: 1%;
  width: 50%;
}


/*to show up*/

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div webstatus="dev" socialmediastatus="Active" class="click-me">Dev</div>
<div webstatus="social" socialmediastatus="Not Active" class="click-me">Social</div>

<!--Modal -->
<div class="modal fade servicemodal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="services">
          <form style="display:none;" class="socialmediaform" method="POST" action="">
            <input value="" name="first_name" placeholder="please enter your name" class="form-control socialforminput">
          </form>
          <span class="services-text">Howdy!</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>

＆＃13;

基于if语句在模态中显示特定内容

3 个答案: