Question

我有一个按钮菜单。根据列表中元素的数量（例如，myList = [“ A”，“ B”，“ C”]），我将显示相同数量的按钮。例如，myList将创建一个包含3个按钮的菜单。

在javascript插件中显示按钮的代码：

    html += '<div id="buttonGallery">'

    // add as many buttons as there are letters
    _.map(myList, function(letters, ind) {   
      html += '<div id="button_' + letters + '" class="buttons">';
      html += '<p>' + letters + '</p></div>';
    });

当用户将鼠标悬停在按钮上时，我试图更改每个按钮的背景色。例如，“ A”可能变成蓝色，“ B”可能变成黄色，而“ C”可能变成绿色。但是，我不知道如何在CSS中执行此操作，因为每个按钮都没有设置ID。

我需要我的代码尽可能地通用，因为在其他情况下，列表可能是“ D”和“ E”。在此其他示例中，将有2个按钮，将鼠标悬停时可能会变成橙色和紫色。

有人对此有建议吗？提前谢谢了！

下面是功能代码的玩具版本：（但请注意，这是不正确的，因为此示例通过赋予它们的id来显示按钮。再次，在实际版本中，我使用了上面的代码，以便它可以推广到我可能会遍历的所有列表。在此示例中，您可以看到所有鼠标悬停时都变成红色。）

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    .buttons:hover {
      background-color: red !important;
      border: solid 3px black !important;
    }

    .selected {
      background-color: red !important;
      border: solid 3px black !important;
    }
  </style>
</head>

<body>

  <div id="buttonGallery">
    <div class="buttons">
      <p>A</p>
    </div>
    <div id="button_B" class="buttons">
      <p>B</p>
    </div>
    <div id="button_C" class="buttons">
      <p>C</p>
    </div>

  </div>

  <script type="text/javascript">
    $('.buttons').click(function() {
    $(".buttons").not($(this)).removeClass("selected");
    $(this).toggleClass("selected");
  </script>
</body>

</html>

（如果需要澄清，我很高兴收到有关如何编辑我的帖子以使其更加清晰的反馈。谢谢！）

Answer 1

您可以这样做：

   	let $buttons = $('<div id="buttonGallery">');
    let myList = ["A", "B", "C", 'D'];
    let myColors = ['red', 'green', 'blue', 'red'];
    
    
    myList.map(function(letter, index) {   
      let $button = $('<div></div>')
      	.addClass('buttons')
        .attr('id', 'button_' + letter)
        .html( '<p>' + letter + '</p>')
        .on('mouseenter', function(){
          $(this).css('background', myColors[index]);
        }).on('mouseleave', function() {
        	$(this).css('background', 'transparent');
        });
      $buttons.append( $button );
    });
        
    $('body').append( $buttons );

.buttons {
  width: 150px;
  height: 50px;
  border: solid 2px black;
  text-align: center;
  color: black;
  cursor: pointer;
  background-color: white;
  margin: 2px;
}

#buttonGallery {
  margin: 10px;
  padding: 10px;
  border: solid 2px black;
  width: 155px;
}

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

将光标悬停在鼠标上时更改背景颜色

1 个答案: