Question

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>

为什么这不会切换相关图标的字体大小。已根据评论中的请求添加了HTML。谢谢！

Answer 1

您在.处理程序的.siblings()选择器上缺少.click()

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>

JQuery Enlarge / Shrink相关元素

1 个答案: