如何在javascript/jquery中的图片上应用点击动作? [英] How to apply on click action on images in javascript/jquery?

问题描述

我有一个小提琴，我通过查看以下屏幕截图进行了复制:

此刻，我能够从设计中复制 fiddle 中的所有内容.

我用来对齐图像的CSS代码段为:

 .product-contents   
 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem;
 }

问题陈述:

现在，如果我点击 屏幕截图(特许经营中心，业务分析，技术支持等)，除了基于云的&移动图片，然后电视屏幕图片(表示其他图片)应显示在解决方案

快速浏览一下您可以做什么.设置event listener，它将在提到的图像上侦听click，然后在传递的回调函数内部，使用element.style.cssProperty(例如，display)更改另一个元素的css属性，以将其从none更改到block.

 const cbBtn = document.querySelector('div#cloud');
const container = document.querySelector('div.container');

cbBtn.addEventListener('click', event => {
  container.style.display = 'block';

  cbBtn.className = 'active';
}); 

 div#cloud {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border: 1px solid black;
  line-height: 100px;
  text-align: center;
}
div#cloud:hover {
  background-color: green;
  color: white;
}
div.container {
  width: 100%;
  height: 200px;
  background: #ccc;
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 200px;
}

.active {
  background-color: green;
  color: white;
} 

 <div id="cloud">
  Cloud Based
</div>

<div class="container">
  CONTAINER CONTENT
</div> 

I have a fiddle which I have replicated by seeing the screenshot below:

At this moment, I am able to replicate everything in fiddle from the design.

The snippets of CSS codes which I have used in order to align images in a straight line are:

 .product-contents   
 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem;
 }

Problem Statement:

In the fiddle, now if I click on any square images from the screenshot (Franchise Hub,Business Analytics, Tech Support, etc) apart from the Cloud Based & Mobile Image then A TV screen image(means a different image) should appear as present in the fiddle.

And if I click on Cloud Based and Mobile image then a phone image should appear (as shown in the current screenshot above)

I am not sure how to apply that logic. I am pretty sure I need to use Javascript but I am not sure how to use that.

解决方案

Just a quick glance of what you can do. Set event listener that will listen for click on the mentioned images and then, inside of the passed callback function, change the css properties of another element using element.style.cssProperty such as display to change it from none to block.

const cbBtn = document.querySelector('div#cloud');
const container = document.querySelector('div.container');

cbBtn.addEventListener('click', event => {
  container.style.display = 'block';

  cbBtn.className = 'active';
});

div#cloud {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border: 1px solid black;
  line-height: 100px;
  text-align: center;
}
div#cloud:hover {
  background-color: green;
  color: white;
}
div.container {
  width: 100%;
  height: 200px;
  background: #ccc;
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 200px;
}

.active {
  background-color: green;
  color: white;
}

<div id="cloud">
  Cloud Based
</div>

<div class="container">
  CONTAINER CONTENT
</div>

这篇关于如何在javascript/jquery中的图片上应用点击动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！