Вопросы Теги

Реализовывать 2 отличные функции в событии onclick javascript

У меня есть ссылка, которая функционирует как кнопка, и которая, нажав, появится снаружи страницы одной 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";
        }
    })
})
5
задан 05.02.2016, 01:08
5 ответов

Твой код хорошо... или почти. Это простой, чем какие-то из выдвинутых решений и единственное, что ты должен делать, состоит в том, чтобы исправлять очень простую ошибку. Если ты обращаешь внимание, в сравнении, чтобы определять в каком положении находится элемент #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>
2
ответ дан 24.11.2019, 14:55
  • 1
    Спасибо друг, я c и # 243; я говорю всегда pens и # 233; что был хорошо выдвинут, но столько часов перед экраном и изюмом это иногда, что ты бьешь козырем в м и # 225; s глупец и ты это не имеешь в виду. – Raúl Moreno Povedano 05.02.2016, 18:43
  • 2
    @Ra и # 250; lMorenoPovedano он происходит со всеми, в м и # 237; первый:) – Alvaro Montoro♦ 05.02.2016, 19:29

Если, но он в действительности более легкий, чем функция, что ты написал.

<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>
2
ответ дан 24.11.2019, 14:55
  • 1
    Это не то, что хочет OP. Он не cuesti и # 243; n, detr выполняет две функции и # 225; s другой, а чередовать между первой и второй – Alvaro Montoro♦ 04.02.2016, 22:29

Я понимаю ты хочешь сделать вид 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);
}
2
ответ дан 24.11.2019, 14:55

Может быть, подайте тебе событие 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 / Я Надеюсь, что он помогает тебе в чем-то. Привет.

1
ответ дан 24.11.2019, 14:55

Ты можешь делать поле hidden, который это считал начальной стоимостью 0, и потом в функции, которую ты называешь с onclick, ты можешь подтверждать эту стоимость. Если он в нуль, ты реализуешь одно из действий и ones стоимость поля hidden в 1. И если - в 1 сноп другой выбор, и ты помещаешь стоимость поля 0 hidden. Так ты сможешь чередовать это

1
ответ дан 24.11.2019, 14:55