У меня есть ссылка, которая функционирует как кнопка, и которая, нажав, появится снаружи страницы одной div
что posicionará, на котором есть в html
в этом положении. Вернувшись, нажав ту же кнопку, я хочу, чтобы он вновь получался вне экрана так же, что он вошел. Это мой код js:
window.addEventListener("load",function(){ var work=document.getElementById("work2"); var flechaWork=document.getElementById('flecha_work'); flechaWork.addEventListener("click",function(){ if(flechaWork.style.left=="50%"){ work.style.left="-60%"; work.style.transition = "all 1.3s"; } else{ work.style.left="50%"; work.style.transition = "all 1.3s"; } }) })
Твой код хорошо... или почти. Это простой, чем какие-то из выдвинутых решений и единственное, что ты должен делать, состоит в том, чтобы исправлять очень простую ошибку. Если ты обращаешь внимание, в сравнении, чтобы определять в каком положении находится элемент #work2
вместо того, чтобы подтверждать положение #work2
, ты подтверждаешь положение #flecha_work
!:
// aquí deberías estar comprobando work2
if(flechaWork.style.left=="50%"){
work.style.left="-60%";
work.style.transition = "all 1.3s";
}
else{
work.style.left="50%";
work.style.transition = "all 1.3s";
}
Как потом в коде то, что ты меняешь, является стилем #work2
условие всегда будет уходить из-за else
и поэтому ты не видишь, что чередовались действия.
Решение: измени условие для того, чтобы было подтверждено положение #work2
:
if(work2.style.left=="50%"){
И тогда действия уже чередуются без проблем:
window.addEventListener("load",function(){
var flechaWork=document.getElementById('flecha_work');
var work=document.getElementById("work2");
flechaWork.addEventListener("click",function(){
if(work.style.left=="50%"){
work.style.left="-60%";
work.style.transition = "all 1.3s";
}
else{
work.style.left="50%";
work.style.transition = "all 1.3s";
}
})
})
#work2 {
position:absolute;
top:100px;
left:-60%;
width:100px;
height:200px;
color:white;
background:black;
}
<button id="flecha_work">Pulsame, soy flecha_work</button>
<div id="work2">
Soy Work2
</div>
Если, но он в действительности более легкий, чем функция, что ты написал.
<button onClick="ejecutar_dos_funciones()" >Ejecutar</button>
<script>
function ejecutar_dos_funciones()
{
funcion_uno();
funcion_dos();
}
function funcion_uno()
{
alert("funcion uno");
}
function funcion_dos()
{
alert("funcion dos");
}
</script>
Я понимаю ты хочешь сделать вид flip flop
между двумя действиями, того, чтобы быть таким, ты мог бы присоединять функцию или другую в событие добавляя это или перемещая это.
window.addEventListener("load",function(){
var work=document.getElementById("work2");
var flechaWork=document.getElementById('flecha_work');
flechaWork.addEventListener("click",flecha1);
});
function flecha1(){
work.style.left="-60%";
work.style.transition = "all 1.3s";
var flechaWork=document.getElementById('flecha_work');
flechaWork.removeEventListener("click", flecha1);
flechaWork.addEventListener("click",flecha2);
}
function flecha2(){
work.style.left="50%";
work.style.transition = "all 1.3s";
var flechaWork=document.getElementById('flecha_work');
flechaWork.removeEventListener("click", flecha2);
flechaWork.addEventListener("click",flecha1);
}
Может быть, подайте тебе событие toggle ()
<div id="target">
Click aquí
</div>
$( "#target" ).toggle(function() {
alert( "Probando acción 1" );
}, function() {
alert( "Probando acción 2" );
});
Очевидно нужно менять alerts на функции, которые ты желаешь. Сейчас, немного более настоящий он имел бы эту форму.
$( "#target" ).toggle( display );
if ( display === true ) {
$( "#target" ).show();
} else if ( display === false ) {
$( "#target" ).hide();
}
Ты можешь видеть документацию и примеры здесь: https://api.jquery.com / toggle / Я Надеюсь, что он помогает тебе в чем-то. Привет.
Ты можешь делать поле hidden, который это считал начальной стоимостью 0, и потом в функции, которую ты называешь с onclick, ты можешь подтверждать эту стоимость. Если он в нуль, ты реализуешь одно из действий и ones стоимость поля hidden в 1. И если - в 1 сноп другой выбор, и ты помещаешь стоимость поля 0 hidden. Так ты сможешь чередовать это