aussiedan aussiedan - 4 months ago 9
Javascript Question

Two values equal the same add class Red

I have two links using the value="valuehere" attribute and I'm trying to get jQuery to have it so when I click the The DEF link it selects out of the top links the link that has the same value as THE DEF link. I would love it also if I could shorten the code also. At the moment it applies the class of Red to all the div's and I only want it to the valid one.

JSFiddle Link: 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;
}


I'm slowly learning jQuery and finding this community amazing as I go with things I really struggle with, so thanks a lot!

Answer

Finally, use this
You need use .attr('value') not .val() function

Try with this.

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