Используйте одно и то же нажатие клавиши, чтобы показать div и скрыть другое, несколько раз, используя Javascript

Question

Используйте одно и то же нажатие клавиши, чтобы показать div и скрыть другое, несколько раз, используя Javascript

0

Позволяет вызвать 2 divs в вопросе div1 и div2.

То, что я пытаюсь сделать, это использовать ключ ввода, чтобы показать div1 и скрыть div2 (если div2 в настоящее время виден) и наоборот. Прямо сейчас у меня есть код, так что нажатие enter будет показывать div1 и скрыть div2, но чтобы вернуться к показанию div2 и div1, вам нужно использовать клавишу shift. Теперь он работает, но я бы хотел, чтобы мне приходилось только вводить текст каждый раз, когда я хочу, чтобы divs чередовались.

Вот код javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var keys = [];
    var code = [13];
    var keys1=[];
    var code1 = [16];
    $(document).keydown(function(keyEvent) {
      keys.push(keyEvent.keyCode);
      keys1.push(keyEvent.keyCode);
      if ( keys.length > code.length ) {
        keys.shift();
      }
      if ( keys1.length > code1.length ) {
        keys1.shift();
      }
      if ( keys.toString() == code.toString() ) {
        showAns();
      }
      if ( keys1.toString() == code1.toString() ) {
        hideAns();
      }

    });
  });
</script>

Любая идея, как выполнить то, что я прошу?

user2943464 15 нояб. 2013, в 07:28

Источник

Теги:

javascript

jquery

html

css

3 ответа

0

Не придавая особого значения, вы можете использовать переменную "state" для хранения этой информации, а затем синхронизировать ее с DOM:

var state = {
  "div1": true,
  "div2": false,
};

synchronizeState();

$(document).on("keydown", function(event) {
  if(event.which === 13) {
    state.div1 = !state.div1;
    state.div2 = !state.div2;
    synchronizeState();
  }
});

function synchronizeState() {
  if(state.div1) {
    $("#div1").show();
  } else {
    $("#div1").hide();
  }

  if(state.div2) {
    $("#div2").show();
  } else {
    $("#div2").hide();
  }
}

Рабочий пример: http://jsbin.com/eJiPavO/1/

Renato Zannon 15 нояб. 2013, в 04:34

0

Я дам вам толчок в правильном направлении, но не дам вам ответа прямо.

Вам нужно найти способ проверить свойство видимости ваших элементов (как проверить, скрыт ли элемент в jQuery? Это может вам помочь!) И добавить это к вашему конидированию следующим образом:

if(KeyIsPressed && element.IsVisible)
{
HideElement
}
else if(KeyisPressed)
{
ShowElement
}

LinusRed 15 нояб. 2013, в 04:11

0

Я пробовал что-то вроде: if (keyEvent.keyCode == 13 && document.getElementById ("hideAnswer"). Style.visibility == "visible") showAns и что-то подобное для альтернативного случая, но это все еще не работало. Я закончил тем, что пошел с ответом Никса, и это сработало. Однако, спасибо
user2943464 15 нояб. 2013, в 06:14

Ещё вопросы

Я пробовал что-то вроде: if (keyEvent.keyCode == 13 && document.getElementById ("hideAnswer"). Style.visibility == "visible") showAns и что-то подобное для альтернативного случая, но это все еще не работало. Я закончил тем, что пошел с ответом Никса, и это сработало. Однако, спасибо

Nikko Reyes · Accepted Answer · 2013-11-15T03-26-00.000Z

Попробуйте этот пример того, чего вы хотите достичь:

var toShow = true;
$(document).keydown(function(keyEvent) {
    if(keyEvent.keyCode == 13){
            $('#div1').toggle(toShow);
            $('#div2').toggle(!toShow);
        toShow = !toShow;
    }
});