Update the content of a div and refresh it when a key on the keyboard is pressed

Question

Update the content of a div and refresh it when a key on the keyboard is pressed

I need to hide the images in a div when I press a key on the keyboard. How can I achieve this?

<div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        
    </span>
    </div>
    <div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        
    </span>
    </div>
    <div>
    <span role="checkbox" aria-checked="false" tabindex="0">
        <img src="unchecked.gif" role="presentation" alt="" />
      
    </span>
    </div>

This particular div contains some content with images. I want these images to be hidden when a keypress event occurs..!

javascript jquery html css

Answer 1

Answer №1

When the user releases a key, use jQuery to toggle the visibility of elements with the class "img".

$(document).ready(function () {
  $('body').keyup(function () {
    $('.img').fadeToggle();
    //$('.img').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="false" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>

Answer 2

When the user releases a key, use jQuery to toggle the visibility of elements with the class "img".

$(document).ready(function () {
  $('body').keyup(function () {
    $('.img').fadeToggle();
    //$('.img').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="false" tabindex="0" class="img">
    <img src="http://lorempixel.com/200/200/" role="presentation" alt="" />
  </span>
</div>

Answer 3

Answer №2

Experiment using the keypress event

$(document).on('keypress',function(){
$('img').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="false" tabindex="0">
    <img src="unchecked.gif" role="presentation" alt="" />

</span>
</div>

Answer 4

Experiment using the keypress event

$(document).on('keypress',function(){
$('img').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />

</span>
</div>
<div>
<span role="checkbox" aria-checked="false" tabindex="0">
    <img src="unchecked.gif" role="presentation" alt="" />

</span>
</div>

Update the content of a div and refresh it when a key on the keyboard is pressed

Answer №1

Answer №2

Similar questions

Tips on validating if a form has already been submitted using JavaScript and AJAX to prevent duplicate submissions

Show just a single error message if there are two validation errors present

Issue encountered when trying to establish a NodeJS reverse SSH tunnel: unable to connect to serveo.net on port

The background video on the website is having trouble resizing properly to fit the screen dimensions

Is there a way to convert a string containing a date calculation, such as "now + 1 day", into a date object?

Removing chips in Material UI can be easily accomplished by following these steps

How to customize font styles in AngularJS

The process of implementing sticky headers that stay in place while scrolling in a React application

Include an option for whitespace characters when validating a file using regex

Retrieve information in JSON format using AngularJS by fetching data from SQL through PHP

Tips for dynamically updating the id value while iterating through a class

Ways to eliminate the unusual dashed space in ReactJS using Bootstrap

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

Pattern matching tool for identifying React components with an unlimited number of properties

A useful tip for emphasizing tags that have attributes with endings

How to apply CSS classes to dynamically injected HTML in Angular 7

Is there a way to locate all items that satisfy a specific criterion within JSON Data?

Is it possible to employ the columns tag within an HTML email design?

Pug: perform a task depending on the presence of an element within a variable

Having trouble transmitting JSON data with Durandal JS and Knockout Binding