javascript - 每次单击按钮时我都想执行一个函数使用 JQuery
问题描述
我想使用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;
}
在任何点击之前: pic-1
在我点击“选择颜色”后: pic-2
如果我选择任何颜色,其他人将得到一个显示,除了我们选择的那个,它也会得到一个“左 20px”: pic-3
所以现在如果我想改变我选择的颜色,我必须点击我以前的颜色,它应该像第二张图片但什么都不会发生 pic-4
解决方案
尝试这个,
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');
});
推荐阅读
- android - addOnFailureListener 如何在 FusedLocationProviderClient 中工作以及为什么 addOnSuccessListener 不起作用?
- python - Python对列表中元素的出现次数进行编号
- node.js - 快递不设置cookies
- git - 如何让Git在删除后忘记文件
- arrays - 在 Dataweave 2.0 中,如何根据 HTTP 查询参数构造第二个数组元素来搜索一个数组
- xcode - 当导航链接到第三个视图嵌入在导航栏按钮中时,SwiftUI 导航无法按预期使用 3 个视图
- javascript - 在 OpenLayers 中初始化后更改视图的最大范围
- javascript - Puppeteer 处理嵌套的 iframe
- postgresql - Postgress 中 Schema 的用户权限被拒绝
- google-apps-script - 谷歌表单依赖下拉列表,使用谷歌应用脚本