я хочу выполнять функцию каждый раз, когда нажимаю на кнопку, используя JQuery

Question

Я хочу создать динамический список цветов с использованием jQuery и CSS (и ofc php, но это не связано с моей проблемой).

При нажатии кнопки «Выбрать цвет» возникает проблемаМой список цветов появится, и если пользователь щелкнет по любому из них, другие не получат отображение, и вот проблема, если пользователь попытается изменить выбранный цвет, он не работает!

<div class="onfocus">
  <div class="color-select">
    <ul class="ul-color">              
      <li id="slect-color"><a href="#">choose a color</a></li>
      <li><a href="#">color1</a></li>
      <li><a href="#">color2</a></li>
      <li><a href="#">color3</a></li>
      <li><a href="#">color4</a></li>
      <li><a href="#">color5</a></li>                
    </ul>
  </div>
</div>

$('.ul-color li').on('click',function(){        
  $(this).css('display','none');

  for(var x = 0 ; x < 10; x++){
    $('.ul-color li').eq(x).css('left', 90*x+'px');
  }

  $('.ul-color li').click(function(){         
    $('.ul-color li').css('display','none');
    $(this).css('display','block');
    $(this).css('left','20px');            
  });
});

.onfocus{
    position: absolute;
    left : 50%;
    top :50%;
    width: 1700px;
    height: 300px;
    background-color: #2c3e50;
    transform: translate(-50%,-50%);
}
.color-select{
    margin-top: 20px;
    margin-left: 20px;
}
.color-select ul{
    list-style: none;
    max-width: 70px;
    display: flex;  
}
.color-select ul li{
    margin-right: 10px;
    padding: 10px;
    position: absolute;
    transition: .5s;  
}
.color-select ul li:nth-child(1){
    z-index: 10;
    background-color: black;
    border-radius: 5px;
}
.color-select ul li+li{
    left: 20px;
}
.color-select ul li a{
    color : #fff    
}
.color-select ul li:hover{
    background-color: #e74c3c;
    border: none;
    border-radius: 5px;
}

Перед любым нажатием: рис-1

После того, как я нажал "выбрать цвет": рис-2

, если я выберулюбой другой цвет будет отображаться ни на одном экране, кроме того, который мы выбрали, и он также получит «оставленные 20 пикселей»: pic-3

, так что теперь, если я хочу изменить свой выбранный цветЯ должен нажать на свой предыдущий, и это должно быть что-то вроде 2-го изображения, но ничего не произойдет рис-4

Answer 1

Это слишком сложно, чтобы справиться со всеми с display: block и display: none. Я немного изменил ваш код, чтобы добавить несколько классов:

• ul.initial - это ваше начальное состояние, когда отображается «Выберите цвет»
• ul.opened - это когда все цветапоказан для выбора
• li.selected - это цвет, который вы выбрали

То, что вы хотите, это чтобы любой li обнаружился, если:

• Мы находимся в исходном состоянии, и li - это "Выберите цвет".
• Мы открыли список, и li НЕ является "Выберите цвет". "one
• li - это выбранный

Вот интересующая вас часть CSS:

.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
    display: block;
}

И ниже, рабочий фрагментна основе вашего кода, с моими улучшениями:

$('.ul-color li').on('click',function() {
  var list = $('.ul-color');
  
  if (!list.hasClass('opened')) {
    // Show all colors
    $('.ul-color li').removeClass('selected');
  } else {
    // A color has been picked
    $(this).addClass('selected');
  }
  
  list.toggleClass('opened');
  list.removeClass('initial');
});

.onfocus{
    /* Be careful, this part one changed only to be visible in the snippet */
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: #2c3e50;
}
.color-select {
    margin-top: 20px;
    margin-left: 20px;
}
.color-select ul {
    list-style: none;
    display: flex;  
}
.color-select ul li {
    margin-right: 10px;
    padding: 10px; 
    display: none;
    z-index: 10;
    background-color: black;
    border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
    display: block;
}
.color-select ul li a {
    color : #fff    
}
.color-select ul li:hover{
    background-color: #e74c3c;
    border: none;
    border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="onfocus">
  <div class="color-select">
    <ul class="ul-color initial">              
      <li id="select-color"><a href="#">choose a color</a></li>
      <li><a href="#">color1</a></li>
      <li><a href="#">color2</a></li>
      <li><a href="#">color3</a></li>
      <li><a href="#">color4</a></li>
      <li><a href="#">color5</a></li>                
    </ul>
  </div>
</div>

Answer 2

Попробуйте,

HTML

  <div class="onfocus">
        <div class="color-select">
            <ul class="ul-color">
                <li id="slect-color"><a href="#">choose a color</a></li>
                <li class="color"><a href="#">color1</a></li>
                <li class="color"><a href="#">color2</a></li>
                <li class="color"><a href="#">color3</a></li>
                <li class="color"><a href="#">color4</a></li>
                <li class="color"><a href="#">color5</a></li>
            </ul>
        </div>
    </div>

CSS

.ul-color{
  list-style-type:none;
  display:flex;
}
.ul-color li{
  margin:5px 10px;
  border-radius:5px;
  background:#333;
  display:none;
}
.ul-color li a{
  text-decoration:none;
  display:inline-block;
    padding:10px 15px;
  color:#FFF;
  border-radius:5px;
}
.ul-color li a:hover{
  background:#e74c3c;
}
#slect-color{
  display:inline-block;
}

Javascript

$('#slect-color').on('click',function(){    
  $('ul li').show();
});

$('.color').on('click',function(){   
  $('.color').hide();
  $(this).css('display','block');
});