时间戳

首页 > 解决方案 > 有人可以请我弄清楚我在 jQuery 中做错了什么，以便在我尝试打开我的模式时得到这个“找不到变量：$”代码吗？

jquery - 有人可以请我弄清楚我在 jQuery 中做错了什么，以便在我尝试打开我的模式时得到这个“找不到变量：$”代码吗？

问题描述

 

$(function(){
        var $modal = $('#ModalContact');
        var $open = $('#jsOpenContact');
        var $close = $('.CloseX');
        var $win = $("window");

        $open.on('click', function(e){
            e.preventDefault();
            $modal.show();
        });

        $close.on("click", function(e){
            e.preventDefault();
            $modal.addClass('.out')
        });

        $win.on('click', function(e){
            e.preventDefault();
            $modal.addClass('.out')
        });

    });
    .NavContact a {
        margin: 0;
        padding: 0;
        text-decoration: none;
        color: white;
        font-family: 'Cinzel Decorative', cursive;
        float: right;
        display: inline-block;
    }
    #ModalContent {
        background-color: darkred;
        margin: 25% auto;
        padding: 10px;
        width: 75%;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.2);
    }
    .Contact {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        transform:scaleY(.01) scaleX(0);
        animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    .open {
        transform:scaleY(.01) scaleX(0);
        animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    #ModalBackground {
        transform:scale(0);
        animation: zoomIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }

    @keyframes unfoldIn {
        0% {transform:scaleY(.005) scaleX(0);}
        50% {transform:scaleY(.005) scaleX(1);}
        100% {transform:scaleY(1) scaleX(1);}
    }
    @keyframes zoomIn {
        0% {transform:scale(0);}
        100% {transform:scale(1);}
    }


    .out {
        transform:scale(1);
        animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    #ModalBackground .out {
        animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    @keyframes unfoldOut {
        0% {transform:scaleY(1) scaleX(1);}
        50% {transform:scaleY(.005) scaleX(1);}
        100% {transform:scaleY(.005) scaleX(0);}
    }
    @keyframes zoomOut {
        0% {transform:scale(1);}
        100% {transform:scale(0);}
    }

    .CloseX {
        color: black;
        float: right;
        font-size: 25px;
    }
    .CloseX:hover {
        color: green;
        text-decoration: none;
        cursor: pointer;
    }
    <div class="NavContact"><a href="#" id="jsOpenContact"> Contact </a></div>
    		</nav>

    			<div id="ModalContact" class="Contact" >
    				<div id="ModalBackground">
    				<div id="ModalContent">
    					<span class="CloseX">  &times; </span>
    					<h4 class="ModalHeader"> Contact Me </h4>
    					<p class="contact"> Email <br>  <a href="mailto:sumayyahameerah@yahoo.com"> sumayyahameerah@yahoo.com </a> </p>
    					<p class="contact"> Instagram <br>  <a href="https://www.instagram.com/sumayyah.ameerah/" target="_blank">  sumayyah.ameerah </a></p>
    				</div>
    				</div>
    			</div>
         
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="/Users/sumayyahameerah/Downloads/jquery-3.4.1.js"></script>
<script src="/Users/sumayyahameerah/Downloads/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous">
</script> **

我已经让我的模态使用 Javascript 工作了，我想要使用 jQuery 来代替这个函数。我真的不明白我在哪里不正确。我没有正确的脚本吗？我不确定为什么我的模态不会在点击时打开。帮助。每次我去控制台检查它说“找不到变量：$”我已经使用了所有这些脚本来尝试找出它。

标签： jqueryhtmlcssonclick

解决方案

首先，您不需要包含这么多 jquery 引用。其次，您不需要使用.in$modal.addClass('.out')它必须是$modal.addClass('out')

演示

$(function() {
  var $modal = $('#ModalContact');
  var $open = $('#jsOpenContact');
  var $close = $('.CloseX');
  var $win = $("window");

  $open.on('click', function(e) {
    e.preventDefault();
    $modal.show();
  });

  $close.on("click", function(e) {
    e.preventDefault();
    $modal.addClass('out')
  });

  $win.on('click', function(e) {
    e.preventDefault();
    $modal.addClass('out')
  });

});
.NavContact a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Cinzel Decorative', cursive;
  float: right;
  display: inline-block;
}

#ModalContent {
  background-color: darkred;
  margin: 25% auto;
  padding: 10px;
  width: 75%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.2);
}

.Contact {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  transform: scaleY(.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.open {
  transform: scaleY(.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

#ModalBackground {
  transform: scale(0);
  animation: zoomIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(.005) scaleX(0);
  }
  50% {
    transform: scaleY(.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.out {
  transform: scale(1);
  animation: unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

#ModalBackground .out {
  animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(.005) scaleX(1);
  }
  100% {
    transform: scaleY(.005) scaleX(0);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.CloseX {
  color: black;
  float: right;
  font-size: 25px;
}

.CloseX:hover {
  color: green;
  text-decoration: none;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="NavContact"><a href="#" id="jsOpenContact"> Contact </a></div>


<div id="ModalContact" class="Contact">
  <div id="ModalBackground">
    <div id="ModalContent">
      <span class="CloseX">  &times; </span>
      <h4 class="ModalHeader"> Contact Me </h4>
      <p class="contact"> Email <br> <a href="mailto:sumayyahameerah@yahoo.com"> sumayyahameerah@yahoo.com </a> </p>
      <p class="contact"> Instagram <br> <a href="https://www.instagram.com/sumayyah.ameerah/" target="_blank">  sumayyah.ameerah </a></p>
    </div>
  </div>
</div>

推荐阅读