我有一个按钮菜单。根据列表中元素的数量(例如,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>
(如果需要澄清,我很高兴收到有关如何编辑我的帖子以使其更加清晰的反馈。谢谢!)
答案 0 :(得分:0)
您可以这样做:
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>