我需要将变量 current 设置为等于已选择链接的数据属性,我该怎么做。我知道有更简单的方法来做我想做的事情,但我需要这样做。
我尝试创建它,但我做不到。
$(".links").click(function(){
var current = $(this).getAttribute("data-cat");
$(current).addClass('hide');
});
ul{
list-style-type: none;
}
ul li{
display: inline-block;
}
ul li a{
font-size: 20px;
padding: 10px;
background-color: yellow;
}
.change{
background-color: red;
}
.hide{
display: none;
}
.print{
height: 100px;
width: 100px;
background-color: blue;
}
<ul>
<li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
<li><a class="links" data-cat="porfolio" href="#">link2</a></li>
<li><a class="links" data-cat="print" href="#">link3</a></li>
</ul>
<div class="print">
</div>
<div class="porfolio">
</div>
<div class="print">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
最佳答案
最好用 .data()
当你处理 data-*
属性时:
var current = $(this).data("cat");
注意:您的选择器中缺少点 .
:
$('.'+current).addClass('hide');
___^
希望这对您有所帮助。
$(".links").click(function(){
var current = $(this).data("cat");
$('.'+current).addClass('hide');
console.log(current);
});
ul{
list-style-type: none;
}
ul li{
display: inline-block;
}
ul li a{
font-size: 20px;
padding: 10px;
background-color: yellow;
}
.change{
background-color: red;
}
.hide{
display: none;
}
.print{
height: 100px;
width: 100px;
background-color: blue;
}
<ul>
<li><a id="hi" class="links" data-cat="print" href="#">link1</a></li>
<li><a class="links" data-cat="porfolio" href="#">link2</a></li>
<li><a class="links" data-cat="print" href="#">link3</a></li>
</ul>
<div class="print">
</div>
<div class="porfolio">
</div>
<div class="print">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
关于javascript - 设置一个等于当前选定链接的数据属性的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44417112/