将变量设置为等于当前所选链接的数据属性

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

使用$(this).attr("data-cat");获取属性，$('.'+current).addClass('hide');使用变量作为类选择器

$(".links").click(function(){
  var current = $(this).attr("data-cat");
  console.log(current)
  $('.'+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 2

在处理data-*属性时，最好使用 .data() ：

var current = $(this).data("cat");

注意：您在选择器中遗漏了点.：

$('.'+current).addClass('hide');
___^

希望这有帮助。

＆＃13;

＆＃13;

$(".links").click(function(){
  var current = $(this).data("cat");
  $('.'+current).addClass('hide');
  console.log(current);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用$.attr()并在猫名称前放置.以从current创建一个类选择器，以便您可以定位它。您还可以在HTML中的.值的开头添加data-cat。

＆＃13;

＆＃13;

$(".links").click(function(){
  var current = $(this).attr("data-cat");
  $('.' + current).addClass('hide');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;