javascript - 设置一个等于当前选定链接的数据属性的变量

Question

我需要将变量 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>

Answer 1

最好用 .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>