JS单击事件取决于div宽度

Question

我正在尝试使用单击事件和 if 查询来调整两个div 的大小。如果div #slide_3_1 100%并单击#arrow_right_3，则div #slide_3_1应0px宽，div #slide_3_2应100%宽。

当我单击#arrow_right_3时，没有任何反应。有什么想法吗？谢谢！

var $div_width = $('#slide_3_1').attr('width');
$(document).ready(function(){
    $("#arrow_right_3").click(function(){
        if ($div_width > 0) {
            $("#slide_3_1").css('width', '0px');
            $("#slide_3_2").css('width', '100%');
        }
    });
});

.HTML：

<div id="section_3" class="section">
    <div class="arrow_left" id="arrow_left_3">Arrow left</div>
    <div class="arrow_right" id="arrow_right_3">Arrow right</div>
    <div id="slide_3_1" class="slide"></div>
    <div id="slide_3_2" class="slide"></div>
    <div id="slide_3_3" class="slide"></div>
</div>

Answer 1

你的代码中有一个拼写错误，第一行应该是'$div_width'。

此外，您应该使用"$div.width（）"获取宽度。这将始终返回宽度，即使元素没有宽度属性也是如此。

Answer 2

将所有内容放在评论中，这是一个工作小提琴：

http://jsfiddle.net/N994Z/1/

$(function() {
    var $div_width = $('#slide_3_1').width();
    $("#arrow_right_3").click(function () {
        if ($div_width > 0) {
            $("#slide_3_1").css('width', '0px');
            $("#slide_3_2").css('width', '100%');
        }
    });
}

Answer 3

从您的问题来看，您似乎有两个 id 为"slide_3_1"的div

"如果 div #slide_3_1 为 100% 并且单击 #arrow_right_3，则另一个div #slide_3_1 应该是 0px 宽"