2017-04-26 14 views
1

Ich arbeite an dem Palettenprojekt und versuche, ein Symbol zu erscheinen, wenn ich ein Bild anwähle.Symbol erscheint bei Auswahl eines Bildes

Das Symbol befindet sich jetzt neben Beige, aber ich habe Mühe, es verschwinden zu lassen, wenn ich kein Bild auswähle.

Die folgenden Bilder beschreiben, wie ich mir dieses Projekt vorstelle.

Bitte helfen.

enter image description here

enter image description here

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:75px; 
 
    height:75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition:all 0.3s; 
 
    transform:translateX(0); 
 
    z-index:1; 
 
} 
 
[data-page='0'] .board-nav-indicator { 
 
    transform:translateX(0); 
 
} 
 
[data-page='1'] .board-nav-indicator { 
 
    transform:translateX(100%); 
 
} 
 
[data-page='2'] .board-nav-indicator { 
 
    transform:translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.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; 
 
} 
 

 
#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.3rem; 
 
    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; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<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/100x100" 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/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Camel 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" 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/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Niagara 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Primrose 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" 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/100x100" 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/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Melon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Chiffon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Island 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Dogwood 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Ivory 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Honeydew 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lavender 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Canary 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Hazelnut 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Kale 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" 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"); 
 
    }); 
 

 
    $(".board-pages .grid-item-pattern-board").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 
    
 

 
    </script>

Antwort

0

1. Sie können gleiche Ereignis zu verschiedenen Selektor wie folgt hinzu: $(".board-pages .grid-item-pattern-board, .board-pages .grid-item") seperate von ,

2. ich überprüfen, ob die angeklickt hat schon Klasse bedeutet, dass es schon aktiv ist, dann deaktiviere ich alle. Wenn noch nicht aktiv, deaktiviere alle und aktiviere diesen.

$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() { 
    if ($(this).hasClass("pick-palette")) { 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
    } else { 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
     $(this).addClass("pick-palette"); 
    } 
    }); 

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 75px; 
 
    height: 75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition: all 0.3s; 
 
    transform: translateX(0); 
 
    z-index: 1; 
 
} 
 

 
[data-page='0'] .board-nav-indicator { 
 
    transform: translateX(0); 
 
} 
 

 
[data-page='1'] .board-nav-indicator { 
 
    transform: translateX(100%); 
 
} 
 

 
[data-page='2'] .board-nav-indicator { 
 
    transform: translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.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; 
 
} 
 

 
#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.3rem; 
 
    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; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 

 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 

 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<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/100x100" 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/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Camel 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" 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/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Niagara 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Primrose 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" 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/100x100" 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/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Melon 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Chiffon 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Island 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Dogwood 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" 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/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Ivory 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Honeydew 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Lavender 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Canary 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Hazelnut 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
      Kale 
 
      </div> 
 
     </div> 
 

 
     <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" 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-pattern-board, .board-pages .grid-item").on("click", function() { 
 
     if ($(this).hasClass("pick-palette")) { 
 
      $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
     } else { 
 
      $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
      $(this).addClass("pick-palette"); 
 
     } 
 
     }); 
 
    </script>

Verwandte Themen