Aaron Phalen Aaron Phalen - 7 months ago 16
Javascript Question

JQuery Enlarge/Shrink Related Elements

var up_vote_button = $('.up-vote-button');
var down_vote_button = $('.down-vote-button');

$(up_vote_button).click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('down-vote')
.find('i').css('font-size', '14px');
});
$(down_vote_button).click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('up-vote')
.find('i').css('font-size', '14px');
});

<div class="votes-container">
<div class="up-vote">
<i></i>
<input class="up-vote-button" type="button" />
</div>
<div class="down-vote">
<i></i>
<input class="down-vote-button" type="button"/>
</div>
</div>


Why is this not toggling the font-sizes of related icons. The HTML has been added per the request in comment. Thanks!

Answer

You are missing . at .siblings() selector at each .click() handler

var up_vote_button = $('.up-vote-button');
var down_vote_button = $('.down-vote-button');

up_vote_button.click(function(){
    $(this).siblings('i').css('font-size', '16px');
    $(this).parent().siblings('.down-vote')
    .find('i').css('font-size', '14px');        
});                                                                                                                                        
down_vote_button.click(function(){
    $(this).siblings('i').css('font-size', '16px');
    $(this).parent().siblings('.up-vote')
    .find('i').css('font-size', '14px');        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="votes-container">    
    <div class="up-vote">
        <i>up</i>
        <input class="up-vote-button" type="button" />
    </div>
    <div class="down-vote">
        <i>down</i>
        <input class="down-vote-button" type="button"/>
    </div>
</div>

Comments