javascript - 如何取消绑定(bind)元素然后允许该元素再次绑定(bind)

Question

我在使用 jQuery 解除绑定(bind)然后动态绑定(bind)元素时遇到了一些问题。

我正在尝试创建一种人们在移动设备上浏览网站时可以使用的标签系统。我希望用户能够选择右箭头并让 ul.tube 移动 margin-left: -300px(工作正常)。左箭头将使 ul.tube 移动 margin-left: 300px(也可以正常工作)。

我要问的问题发生在您达到 -900px 的最大 margin-left 时，代码会解除绑定(bind)右箭头。当您到达 -900px 后再次开始单击左箭头时，我会喜欢它，以重新绑定(bind)右箭头。这将允许人们在完全向左切换后返回到右侧。

Example Screenshot

下面是 HTML 代码示例。

<div id="how-we_set">
    <i class="fa fa-chevron-left left"></i><br>
    <i class="fa fa-chevron-right right"></i><p></p>
    <ul class="tube">
        <li>Discovery</li>
        <li>Discovery 2</li>
        <li>Discovery 3</li>
        <li>Discovery 4</li>
    </ul>
    <div id="tab1">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab2">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab3">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab4">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
</div>

以下是我目前使用的 Javascript。

// MOBILE DESIGN TAB
$('#how-we_set i.right').click(function handler() {
    $("#how-we_set ul.tube li").addClass("active");
    $("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "-=300px"
    },
    function () {
      if ($(this).css ('marginLeft') >= "-900px") {
        $("#how-we_set i.right").unbind('click', handler);
        $("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)');
      }
    });
});
$('#how-we_set i.left').click(function handler2() {
    $("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "+=300px"
    },
    function () {
      if ($(this).css ('marginLeft') >= "0px") {
        $("#how-we_set i.left").unbind('click');
        $("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
      }
    });
    $('#how-we_set i.right').bind(handler);
});

看完示例屏幕截图后，我相信您可以理解我试图在每次单击箭头时标记图像和下面的所有内容。

我怎样才能让这项工作如我所愿？有没有更好的方法来解决这个问题？我乐于接受新想法。

Answer 1

尝试这样的事情，使用专门的处理函数:

$('#how-we_set i.right').click(right_click_handler);
$('#how-we_set i.left').click(left_click_handler);

function bind_handlers(element) {
    if (parseInt(element.css('marginLeft')) <= -900) {
        $("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.right").bind('click', right_click_handler);
    }

    if (parseInt(element.css('marginLeft') >= 0) {
        $("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.left").bind('click', left_click_handler);
    }
};

function right_click_handler() {
    $("#how-we_set i.right").unbind('click', right_click_handler);
    $("#how-we_set ul.tube li").addClass("active");
    $("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "-=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

function left_click_handler() {
    $("#how-we_set i.left").unbind('click', left_click_handler);
    $("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "+=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

这些更改仅影响处理程序注册。请注意，在原始的 jsFiddle 中，两个按钮一开始都是启用的，但顶部(左)按钮应该被禁用。如果你先点击顶部按钮，它会因为初始状态而变得有点滑稽；首先点击底部按钮就可以正常工作并避免了有趣的行为。

您可能会考虑进行一些重构以减少代码中的冗余。我像这样重构它(jsFiddle https://jsfiddle.net/mgaskill/w5kz7e1h/):

var how_we_set = $("#how-we_set");
var ul_tube = how_we_set.find("ul.tube");
var ul_tube_li = ul_tube.find("li");
var right_i = how_we_set.find("i.right");
var left_i = how_we_set.find("i.left");

function right_click_handler() {
    click_handler($(this), "-=300px");
};

function left_click_handler() {
    click_handler($(this), "+=300px");
};

function click_handler(element, amount) {
    right_i.unbind('click', right_click_handler);
    left_i.unbind('click', left_click_handler);

    ul_tube_li.addClass("active");
    ul_tube.animate({
        'marginLeft' : amount
    },
    update_buttons_state);
};

function update_buttons_state() {
    var marginLeft = parseInt(ul_tube.css('marginLeft'));

    right_i.css('color', 'rgba(0,0,0,1.0)');
    left_i.css('color', 'rgba(0,0,0,1.0)');

    if (+marginLeft <= -900) {
      right_i.css('color', 'rgba(0,0,0,0.2)');
    } else {
      right_i.bind('click', right_click_handler);
    }

    if (marginLeft >= 0) {
      left_i.css('color', 'rgba(0,0,0,0.2)');
    } else {
      left_i.bind('click', left_click_handler);
    }
};

update_buttons_state();

这仍然是大约相同数量的代码行，但缓存 jQuery 查找并重新使用左右按钮之间的所有点击处理逻辑，因此您将在按钮之间具有一致的行为。通过 update_buttons_state() 的单独函数，您可以在 UI 第一次运行之前调用它，以确保按钮状态不允许由于初始状态不正确而导致的奇怪行为。

更新后的代码还在 animate 调用之前取消绑定(bind)点击处理程序，以防止在动画运行时应用多次快速点击。此外，与右侧限制 (-900px) 的比较是通过将像素数转换为整数来完成的，以便进行正确的比较。