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

我试图仅当满足两个条件时才以模态显示表单。如果不满足条件，我将显示其他内容。奇怪的是，如果我先单击

dev

块，我可以看到

Hello

。但是，每当我首先单击

social

块，然后再返回单击

dev

块时，表单就会显示出来。我能做些什么来解决这个问题

编辑 正如马克所建议的，我复制了在我的程序中感受到的相同行为。无论您单击哪个块，无论条件如何，信息都将显示。如果您单击

social

块，您应该只看到表单，当您单击

dev

块时，您应该只看到

Hello。

Html

$（文档）.ready（函数（）{
$（'.click me'）。单击（函数（e）{
e、 预防默认值（）；
//显示模态
$（'.serviceModel'）.model（'show'）；
//获取变量
var socialmediastatus=$（this.attr（“socialmediastatus”）；
var webstatus=$（this.attr（“webstatus”）；
//状况
如果（socialmediastatus==‘不活动’&&webstatus==‘社交’）{
//表演形式
$（“.socialmediaform”）.show（）；
}否则{
//附加消息
$（“.services”）.append（“Hello”）；
}
});
});
。单击我{
边框：石灰固体5px；
利润率：1%；
宽度：50%；
}
/*显示*/

发展
社会的
&时代；
模态头
接近
为什么不将消息添加到div中并根据条件显示/隐藏？如下图所示：


$（文档）.ready（函数（）{
$（'.click me'）。单击（函数（e）{
e、 预防默认值（）；
//显示模态
$（'.serviceModel'）.model（'show'）；
//获取变量
var socialmediastatus=$（this.attr（“socialmediastatus”）；
var webstatus=$（this.attr（“webstatus”）；
//状况
如果（socialmediastatus==‘不活动’&&webstatus==‘社交’）{
//表演形式
$（“.socialmediaform”）.show（）；
$（“.devContent”）.hide（）；
}否则{
//附加消息
$（“.devContent”）.show（）；
$（“.socialmediaform”）.hide（）；
}
});
});
。单击我{
边框：石灰固体5px；
利润率：1%；
宽度：50%；
}
/*显示*/

发展
社会的
&时代；
模态头
你好
接近
您应该创建一个函数，当您关闭模式时，该函数将清除表单和附加的“Hello”，以便下次触发时不会显示它们

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

$（“.services”）.append（“Hello”）

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

$（'.serviceModel'）.on（'hidden.bs.modal'，函数（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();
    });

  });
});

$（文档）.ready（函数（）{
$（'.click me'）。单击（函数（e）{
e、 预防默认值（）；
//显示模态
$（'.serviceModel'）.model（'show'）；
//获取变量
var socialmediastatus=$（this.attr（“socialmediastatus”）；
var webstatus=$（this.attr（“webstatus”）；
//状况
如果（socialmediastatus==‘不活动’&&webstatus==‘社交’）{
//表演形式
$（“.socialmediaform”）.show（）；
}否则{
//附加消息
$（“.services”）.append（“Hello”）；
}
$（'.serviceModel'）.on（'hidden.bs.modal'，函数（e）{
$（“.socialmediaform”）.hide（）；
$（“.hellotext”）.remove（）；
});
});
});

查看引导文档作为参考：
一旦附加到模态，就不会清除它；随后还会添加更多文本

最好显示/隐藏该文本，或者通过将其放置在带有类的
span
中并删除该文本来删除该文本。无论哪种方式，基本标记都是一样的，因此我将显示/隐藏以避免追加挑战对DOM造成很大的冲击，从而重新流动

注意：我还将show/hide模式移到最后，以避免在某些浏览器上有时出现视觉上的“flash”


$（文档）.ready（函数（）{
$（'.click me'）。单击（函数（e）{
e、 预防默认值（）；
//获取变量
var socialmediastatus=$（this.attr（“socialmediastatus”）；
var webstatus=$（this.attr（“webstatus”）；
让isSocial=（socialmediastatus=='notactive'&&webstatus=='social'）；
//表演形式
$（“.socialmediaform”）.toggle（isSocial）；
$（“.services text”）.toggle（！isSocial）；
//显示模态
$（'.serviceModel'）.model（'show'）；
});
});
。单击我{
边框：石灰固体5px；
利润率：1%；
宽度：50%；
}
/*显示*/

发展
社会的
&时代；
模态头
你好！
接近
这一次您使用的是引导模式，对吗？我将您的部分代码放入了一个可行的包装器中。请将模态部分和由
.servicemodel
表示的部分以及模态部分和
.socialmediaform
表示的部分放在一起，因为这并不能充分说明您的问题。另请注意，
“somediv”
不是有效的selector@undrftd：是，我正在使用引导模式。我将用标签进行编辑。@MarkSchultheiss:谢谢您的编辑。我将添加更多代码。@MarkSchultheiss：我已经在这里的代码片段中复制了这种行为。你可以试着亲自看看我在说什么。