Javascript变量作为数组工作

Javascript variable is working as array

本文关键字：数组 工作 变量 Javascript      更新时间：2023-12-28

我已经动态创建了jquery选项卡。我想重命名选项卡。当我点击选中的选项卡时，模糊显示一个文本框，它将文本框的值设置为该选项卡。当我再次尝试为另一个选项卡执行此操作时，它将重命名当前和以前的选项卡。等等…

JS Fiddle上的实时演示

$(document).ready(function() {
$("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
});
});
$(function() {
    for (i=0; i<3; i++){
    var title = '<span id="a'+i+'">Tab.....  ' + i;
        var url = '#fragment-' + i;
        addTab(url, title, i);
    }
    var index =10;
    index++;
    $("#addTab").live('click', function() {
        index++;
        var title = '<span id="a'+index+'">Tab.....  ' + index;
        var url = '#fragment-' + index;
        addTab(url, title, index);
    });
function addTab(url, title, index) {
    $('#tabs').tabs("add", url, title, [index]);
    $('#a'+index).click(function(){
            var _current = '#a'+index 
            if($(_current ).parent().parent().hasClass('ui-tabs-selected')){
                $(_current).hide();
                $('#editTabName').stop(false, true).hide();
                var nameField = '#editTabName';
                $(nameField).css({
                        top: '12px',
                        left: $(this).parent().offset().left + 8+'px',
                        zIndex:100,
                        position:'absolute'
                    });
           $(nameField).val($(_current).html());
                $(nameField).show(50);
                $(nameField).focus();
                $(nameField).blur(function (){
                    alert(_current);
                    newName = $(nameField).val();
                    $(_current).html(newName);
                    $(nameField).hide();
                    $(_current).show();
                });
            }
        });
}

$('#removeTab').live('click', function() {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    if(selected == -1)
        selected = $('p[id=removeTab]').index(this);
    $('#tabs').tabs("remove", [selected]);
});
});​

每次重命名时都要设置绑定事件。$(nameField).blur(function (){})实际上不会覆盖您以前的模糊，它只会附加函数。因此，在添加新函数之前，您需要解除绑定。$(nameField).unbind('blur');

所以功能将是

function addTab(url, title, index) {
    $('#tabs').tabs("add", url, title, [index]);
    $('#a'+index).click(function(){
        var _current = '#a'+index;
        if($(_current ).parent().parent().hasClass('ui-tabs-selected')){
            $(_current).hide();
            $('#editTabName').stop(false, true).hide();
            var nameField = '#editTabName';
            $(nameField).css({
                    top: '12px',
                    left: $(this).parent().offset().left + 8+'px',
                    zIndex:100,
                    position:'absolute'
                });
            $(nameField).val($(_current).html());
            $(nameField).show(50);
            $(nameField).focus();
            $(nameField).unbind('blur');                
            $(nameField).blur(function (){
                alert(_current);
                newName = $(nameField).val();
                $(_current).html(newName);
                $(nameField).hide();
                $(_current).show();
            });
        }
    });
}

使用一个而不是模糊。

$(nameField).blur(function ()

变为：

$(nameField).one('blur', function (){

http://jsfiddle.net/k44Wk/18/

相关文章：