jquery - 两个值等于相同的添加类Red

我有两个使用value =“ valuehere”属性的链接，并且我试图让jQuery拥有它，因此当我单击DEF链接时，它将从顶部链接中选择与DEF链接具有相同值的链接。如果也可以缩短代码，我也很喜欢。目前，它将Red类别应用于所有div，而我只希望将其应用于有效的div。

JSFiddle链接：http://jsfiddle.net/n7VMY/20/

的HTML

<ul>
    <li><span>Item 1</span>: <span class="num"><a href="#test" value="00">abc</a></span></li>
    <li><span>Item 2</span>: <span class="num"><a href="#test2" value="01">def</a></span></li>
    <li><span>Item 3</span>: <span class="num"><a href="#test3 "value="02">ghi</a></span></li>
    <li><span>Item 4</span>: <span class="num"><a href="#test4" value="03">zyx</a></span></li>
</ul>
<div class="test">
 random text
</div>
<div id="thisdiv">
    <a href="#" value="01" class='mcdiv'>The DEF</a>
</div>

jQuery的

$(document).on('click','.mcdiv',function(){

$(".num a").each(function(i,v){
   var $info = $(this);

   $(".mcdiv").each(function(i,v){
       var $thisdivlink = $(this);

      if($info.val()==$thisdivlink.val()){
          $info.addClass( 'red' );
       }

   });
});

});

的CSS

.disabled {
    color:#ccc;
}
.num { padding: 10px 10px; line-height: 30px; }
.red { color: red !important;
  background: #000;
  display: block;
  width: 400px; height: 400px;
}

.test {
padding: 30px 30px;
font-size: 28px;
color: purple;
}
#thisdiv a {
 display: block;
 background: purple;
 color: #fff;
 font-size: 28px;
  width: 200px; height: 200px;
  text-align: center;
  line-height: 200px;
}

我正在慢慢学习jQuery，并在处理我真正遇到的困难时发现这个社区很棒，非常感谢！

最佳答案

最后，用这个
您需要使用.attr('value')而不是.val()函数

试试这个。

$(document).on('click', '.mcdiv', function() {
  var foo = $(this).attr('value')
  $('a[value="'+ foo +'"]').toggleClass('red')
});

.disabled {
  color: #ccc;
}
.num {
  padding: 10px 10px;
  line-height: 30px;
}
.red {
  color: red !important;
  background: #000;
  display: block;
  width: 400px;
  height: 400px;
}
.test {
  padding: 30px 30px;
  font-size: 28px;
  color: purple;
}
#thisdiv a {
  display: block;
  background: purple;
  color: #fff;
  font-size: 28px;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span>Item 1</span>: <span class="num"><a href="#test" value="00">abc</a></span>
  </li>
  <li><span>Item 2</span>: <span class="num"><a href="#test2" value="01">def</a></span>
  </li>
  <li><span>Item 3</span>: <span class="num"><a href="#test3 "value="02">ghi</a></span>
  </li>
  <li><span>Item 4</span>: <span class="num"><a href="#test4" value="03">zyx</a></span>
  </li>
</ul>
<div class="test">
  random text
</div>
<div id="thisdiv">
  <a href="#" value="01" class='mcdiv'>The DEF</a>
</div>