堆棧內存溢出
  簡體   English   中英

如何在三個不同的行中一次僅選擇一個圖像？

[英]How to select only one image at a time among three different rows?

 原文  2017-04-25 22:13:32  4   1    javascript/ jquery/ onclick/ siblings

問題描述

我正在創建調色板，用戶可以一次選擇一張圖像。

我通過使用javascript使用點擊操作，但是每一行可以一次選擇一個圖像。

我只想在這三行中選擇一張圖像。

怎么做？ 請幫忙。 

 * { 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

以這種方式 

 * { 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>

  1. 從先前的活動圖像中查找並刪除類。
  2. 將類別添加到單擊的圖像

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在Angular JS中的不同視頻中僅播放一個視頻 三個不同的div上的同一張圖片，只能加載一次？ 怎么樣？ Tabulator 可移動行 -- 如何 select/ 一次移動多個項目 一次僅選擇一個區域 一次僅選擇一個區域 一次只有一個復選框 select 如何使用jquery一次只選擇一個LI元素？ 如何 select 在 angular 10 中一次只有一個 div Javascript createRange。 如何只用一個腳本選擇不同的跨度？ 如何一次使用節點js中三個不同API調用的響應
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM