Question

好的，我迷失在这里。我在这里阅读了很多帖子，其他关于如何检查给定元素状态的主题，特别是它是可见还是隐藏，并使状态更改触发事件。但我不能使任何建议的解决方案有效。

首先，由于每个人似乎都先跳过这一点，因此我需要这样做，因为我有一个jQuery脚本，它处理在可点击状态下显示svg图标。另一个已经具有执行相关操作的功能，当通过单击图标使表单可见时，显然我想重用它们。

我尝试过：

最初我尝试让两个脚本都作用于单击事件（这仍然是理想的解决方案）....

脚本1：

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
 }).svg({loadURL: '../_public/_icons/booked.svg'});


Script 2:

 $(".booked").on("click", function() {
 // do stuff
 });

这没有用，所以我尝试研究在两个脚本之间共享一个事件但是无法对这个主题做任何反应，所以我尝试触发另一个事件让第二个脚本拿起....

脚本1：

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
         $("#cancellation_Form_Wrapper").trigger("change");
 }).svg({loadURL: '../_public/_icons/booked.svg'});

脚本2

 $("#cancellation_Form_Wrapper").on("change", function(event){
    // do stuff
 });

这不再起作用我不清楚为什么这没有达到预期的效果。

然后我尝试了（：可见）......

脚本1

 $(".booked").on("click", function() {
         $("#cancellation_Form_Wrapper").css("visibility","visible");
 }).svg({loadURL: '../_public/_icons/booked.svg'});

脚本2

 $("#cancellation_Form_Wrapper").is(":visible", function(){
 // do stuff
 });

所以我有点失落。理想的是回到第一个概念。我不明白为什么两个脚本都无法处理svg上的click事件。我认为这与事件处理程序有关，但我不确定如何修改脚本以便它们都选择了相同的事件。

如果失败，我可以使用可见性状态更改的事实来触发操作。

欢迎任何指导。

修改确定我刚才已经解决了这个问题用脚本2从脚本1.遗憾地说，这是我的一个基本的错误拿起触发事件......的形式防止显示器警报但是我仍然无法让is（：visible）起作用。

Answer 1

您的语法可能已关闭：

$("#cancellation_Form_Wrapper").is(":visible", function(){
    // do stuff
});

应该是：

if($("#cancellation_Form_Wrapper").is(":visible")){
    // do stuff
});

编辑：如果你希望在之后发生某些事情，那么div可见，你可能想要使用show（）回调而不是切换可见性：

$('#cancellation_Form_Wrapper').show(timeInMilliseconds, function(){
    // do something
});

然而，这需要在同一个功能中进行，我认为这不会改善你的位置。

问题可能是您的第二个on()脚本与您的第一个脚本同时触发，这意味着包装器尚未可见。你可以尝试在短暂的超时中包装第二个on()：

$(".booked").on("click", function() {
    setTimeout(function(){
        if($("#cancellation_Form_Wrapper").is(":visible")){
            // do stuff
        });
    }, 100);
});

这应该引入足够的延迟以确保在尝试执行第二个语句之前已经显示了包装器。

跨两个脚本共享事件或使用更改是可见性状态作为事件触发器

1 个答案: