3つの異なる行の中から一度に1つの画像のみを選択する方法はありますか？

私はカラーパレットを作成しており、ユーザーは一度に1つのイメージを選択できます。3つの異なる行の中から一度に1つの画像のみを選択する方法はありますか？

私はJavaScriptを使用してクリックアクションを使用していますが、各行は一度に1つの画像を選択できます。

3つの異なる行から1つの画像のみを選択します。

どうすればよいですか？助けてください。そのようにして

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

出典

2017-04-25 Jin Ho Bryan Lee

例

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

検索と前のアクティブイメージからクラスを削除するため。
画像

出典

2017-04-25 22:17:57

をクリックするクラスを追加し、あなたにパブロありがとうございました！完璧に動作しています！ –

3つの異なる行の中から一度に1つの画像のみを選択する方法はありますか？

答えて

関連する問題