如何在三个不同的行中一次仅选择一个图像？
[英]How to select only one image at a time among three different rows?
问题描述
I'm creating color palette and user can select one image at a time. 
我正在创建调色板，用户可以一次选择一张图像。
I'm using click action by using javascript but each row can select one image at a time. 我通过使用javascript使用点击操作，但是每一行可以一次选择一个图像。
I want to only select one image among those three different rows. 我只想在这三行中选择一张图像。
How to do it? 怎么做？ Please help. 请帮忙。
* { box-sizing:border-box; } body { margin:0; color: #FFF; } .board-pages { position:absolute; top:75px; left:0; width:100%; height:calc(100% - 75px); overflow:hidden; } .board-page { position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.4s; transform:translateX(0); overflow:auto; background-color: #262931; } .grid-row-theme .grid-item-theme { max-width: 130px; } .trending-above-palette { padding: 6px; } #align-left { float: left; color: #747474; } #align-right { float: right; color: #9CC8E3; } .grid-item { flex:0 1 25%; padding:6px; } .grid-item-theme { flex:0 1 25%; padding:6px; } .grid-row { overflow-x:auto; white-space:nowrap; } .grid-row .grid-item { display:inline-block; max-width:110px; } .grid-item-content { text-align:left; font-family: "mr-eaves-modern"; font-size:0.7rem; text-transform:uppercase; } .pick-palette img{ border: 3px solid #FFF; } #dropdown-menu { display: flex; align-items: center; justify-content: center; text-align: center; margin: 2% 0 6% 0; font-size: 0.9rem; letter-spacing: 1px; }
<html lang="en"> <head> <meta charset="utf-8"> <title>Omnibag Project</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="assets/css/style.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div class="board-pages"> <div class="board-page"> <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> <div class="trending-above-palette"> <div class="grid-item-theme" id="align-left">Trending</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-beige"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Beige <!-- <i class="material-icons more-icon">more_horiz</i> --> </div> </div> <div class="grid-item grid-camel"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Camel </div> </div> <div class="grid-item grid-salmon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Salmon Pink </div> </div> <div class="grid-item grid-navajo"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Navajo White </div> </div> <div class="grid-item grid-niagara"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Niagara </div> </div> <div class="grid-item grid-primrose"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Primrose </div> </div> <div class="grid-item grid-lapis"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Lapis Blue </div> </div> </div> <div class="after-first-palette"> <div class="grid-item-theme" id="align-left">Newly added</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-pale"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Pale Blue </div> </div> <div class="grid-item grid-moss"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Moss Green </div> </div> <div class="grid-item grid-melon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Melon </div> </div> <div class="grid-item grid-chiffon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Chiffon </div> </div> <div class="grid-item grid-island"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Island </div> </div> <div class="grid-item grid-dogwood"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Dogwood </div> </div> <div class="grid-item grid-greenery"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Greenery </div> </div> </div> <div class="after-first-palette"> <div class="grid-item-theme" id="align-left">All Warm Colors</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-ivory"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Ivory </div> </div> <div class="grid-item grid-honeydew"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Honeydew </div> </div> <div class="grid-item grid-lavender"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Lavender </div> </div> <div class="grid-item grid-canary"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Canary </div> </div> <div class="grid-item grid-hazelnut"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Hazelnut </div> </div> <div class="grid-item grid-kale"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Kale </div> </div> <div class="grid-item grid-sharkskin"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content sharkskin"> Sharkskin </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://use.typekit.net/hoc0zbs.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script> $(".board-pages .grid-item").on("click",function(){ $(this).addClass( "pick-palette" ).siblings().removeClass("pick-palette"); }); </script>
1 个解决方案
解决方案1
0 已采纳 2017-04-25 22:17:57
In that way for example 以这种方式
* { box-sizing:border-box; } body { margin:0; color: #FFF; } .board-pages { position:absolute; top:75px; left:0; width:100%; height:calc(100% - 75px); overflow:hidden; } .board-page { position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.4s; transform:translateX(0); overflow:auto; background-color: #262931; } .grid-row-theme .grid-item-theme { max-width: 130px; } .trending-above-palette { padding: 6px; } #align-left { float: left; color: #747474; } #align-right { float: right; color: #9CC8E3; } .grid-item { flex:0 1 25%; padding:6px; } .grid-item-theme { flex:0 1 25%; padding:6px; } .grid-row { overflow-x:auto; white-space:nowrap; } .grid-row .grid-item { display:inline-block; max-width:110px; } .grid-item-content { text-align:left; font-family: "mr-eaves-modern"; font-size:0.7rem; text-transform:uppercase; } .pick-palette img{ border: 3px solid #FFF; } #dropdown-menu { display: flex; align-items: center; justify-content: center; text-align: center; margin: 2% 0 6% 0; font-size: 0.9rem; letter-spacing: 1px; }
<html lang="en"> <head> <meta charset="utf-8"> <title>Omnibag Project</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="assets/css/style.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div class="board-pages"> <div class="board-page"> <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> <div class="trending-above-palette"> <div class="grid-item-theme" id="align-left">Trending</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-beige"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Beige <!-- <i class="material-icons more-icon">more_horiz</i> --> </div> </div> <div class="grid-item grid-camel"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Camel </div> </div> <div class="grid-item grid-salmon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Salmon Pink </div> </div> <div class="grid-item grid-navajo"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Navajo White </div> </div> <div class="grid-item grid-niagara"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Niagara </div> </div> <div class="grid-item grid-primrose"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Primrose </div> </div> <div class="grid-item grid-lapis"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Lapis Blue </div> </div> </div> <div class="after-first-palette"> <div class="grid-item-theme" id="align-left">Newly added</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-pale"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Pale Blue </div> </div> <div class="grid-item grid-moss"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Moss Green </div> </div> <div class="grid-item grid-melon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Melon </div> </div> <div class="grid-item grid-chiffon"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Chiffon </div> </div> <div class="grid-item grid-island"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Island </div> </div> <div class="grid-item grid-dogwood"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Dogwood </div> </div> <div class="grid-item grid-greenery"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Greenery </div> </div> </div> <div class="after-first-palette"> <div class="grid-item-theme" id="align-left">All Warm Colors</div> <div class="grid-item-theme" id="align-right">See all</div> <div style="clear: both;"></div> </div> <div class="grid-row"> <div class="grid-item grid-ivory"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Ivory </div> </div> <div class="grid-item grid-honeydew"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Honeydew </div> </div> <div class="grid-item grid-lavender"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Lavender </div> </div> <div class="grid-item grid-canary"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Canary </div> </div> <div class="grid-item grid-hazelnut"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Hazelnut </div> </div> <div class="grid-item grid-kale"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content"> Kale </div> </div> <div class="grid-item grid-sharkskin"> <img src="http://placehold.it/80x80" alt="" class="grid-item-img" /> <div class="grid-item-content sharkskin"> Sharkskin </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://use.typekit.net/hoc0zbs.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script> $(".board-pages .grid-item").on("click",function(){ $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); $(this).addClass( "pick-palette" ); }); </script>
- Find and remove class from previous active image. 从先前的活动图像中查找并删除类。
- Add class to clicked image 将类别添加到单击的图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在Angular JS中的不同视频中仅播放一个视频 - How to play only one video among different videos in Angular JS
三个不同的div上的同一张图片，只能加载一次？ 怎么样？ - same image on three different divs, load only once? how?
Tabulator 可移动行 -- 如何 select/ 一次移动多个项目 - Tabulator moveable rows -- how to select / move multiple items at one time
一次仅选择一个区域 - Select only one area at a time
一次仅选择一个区域 - Select only one region at a time
一次只有一个复选框 select - Only select one checkbox at a time
如何使用jquery一次只选择一个LI元素？ - How to select only one LI element at time with jquery?
如何 select 在 angular 10 中一次只有一个 div - How to select only one div at a time in angular 10
Javascript createRange。 如何只用一个脚本选择不同的跨度？ - Javascript createRange. How to select different spans with only one script?
如何一次使用节点js中三个不同API调用的响应 - How to use response from three different API calls in node js at one time
相关标签