Question

我正在尝试使用click事件和if查询来调整两个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（）'获取宽度。即使元素没有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宽”

JS单击事件取决于div宽度

3 个答案: