Trying to run specific js script by pass button with specific id or class

October 25, 2022

I am trying to run this script with a specific id or class of buttons as on my website I have multiple control.

Now, these things run okay when I don’t use any class or id in it, but as soon as I add anything specific, it won’t. do have a look at the code and let me know how we can solve it.

$(function() {
  $("classIneed").click(function() {
    $(".cover").fadeIn("300");
  });
  $("classIneed").click(function() {
    $(".cover").css("flex");
  });
  $(".cover,.close").click(function() {
    $(".cover").fadeOut("300");
  });
  $(".contents1").click(function(e) {
    e.stopPropagation();
  });
});

.cover {
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-size: 100%;
}

.contents1 {
  background: #fff;
  border: 5px solid #ccc;
  border-radius: 30px;
  position: fixed;
  z-index: 5;
  padding: 10px;
  width: 25%;
}

.close {
  position: absolute;
  top: 15px;
  right: 10px;
  transition: all 200ms;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

.test {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 480px) {
  .contents1 {
    width: 85%;
    margin: 10%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="classIneed" type="button" style="border:hidden; background:#fff;padding:0px;"> <img  style="padding:0px;" src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/Free-Skillet-HC-India-New-3_091a5e6b-0f58-418d-917c-fdfc9cc17a8b.png?v=1661337873" alt="gh" width="100%" height="10%"/>
    </button>

<div class="cover">
  <div class="test">
    <div class="contents1">
      <img src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/imgonline-com-ua-resizePERCRgtKVzgcOWZp.jpg?v=1665123456" alt="gh" width="100%" height="100%" />
      <span class="close">&times;</span>
    </div>
  </div>
</div>

As for check I have used class = classIneed which does not work but if change it to just button it will.

>Solution :

You’re missing a dot in your selection, as jQuery doesn’t know what you’re looking for.
You should use $("#id") or $(".class"), # is for IDs of elements, while . is for classes.
If you write the syntax without any of those, if I’m not mistaken, you’re then actually searching for tag names, i.e. $("div"), $("h1") etc.