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