Jestem początkującym w javascript, dlatego nie mogę zrozumieć, na czym polega problem z moim kodem.

Po prostu chcę dodać klasę .open do mojego maindiv po kliknięciu. Chcę, aby mój div otwierał się z lewej strony.

function myfunction() {
  $(this).addClass('open');
}
body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>
1
Wania Kanwal 8 marzec 2020, 16:05

2 odpowiedzi

Najlepsza odpowiedź

Wystąpił problem z this. Po prostu spróbuj uzyskać dostęp do swojego div za pomocą identyfikatora w jQuery. Możesz także zmienić .addClass na toggleClass, jeśli chcesz przełączyć go przy następnym kliknięciu.

function myfunction() {
  $("#maindiv").addClass('open');
}
body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px !important;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>
0
JSEvgeny 8 marzec 2020, 13:21

Przekazujesz to jako parametr funkcji. Wtedy to zadziała.

<div id="maindiv" onclick="myfunction(this)">



function myfunction(elm) { $(elm).addClass('open'); }
0
Sairam 8 marzec 2020, 13:11