Question

我已经编写了太多的javascript，现在代码不断重复，而我却缺乏如何简化问题的知识。我有这个将变量调用到函数中的想法，但我不知道如何调用这种包含动态变量的函数。

任何人都有关于如何实现这一目标的任何提示？

var container    = '#content_container';

function container_load(){
    var data         = $(this).attr('data');
    var dataObject   = {command : data};
    var title        = '<h2 data="'+dataObject.command+'">'+
                        dataObject.command+'</h2>';

};

$(function(){
    $('nav')on.('click', 'a', function(){
        container_load();
        $(container).prepend(title);
    });
});

显然，控制台返回了ReferenceError: Can't find variable: dataObject

Answer 1

您的代码中有两个问题

var container    = '#content_container';
var title;   //title should be declare as global,same as "container" variable
function container_load(dis){
    var data         = dis.attr('data');
    var dataObject   = {command : data};
    title        = '<h2 data="'+dataObject.command+'">'+
                        dataObject.command+'</h2>';

}

$(function(){
    $('nav').on('click', 'a', function(){
        container_load($(this)); //you have to pass the current element
        $(container).prepend(title); 
    });
});

演示： Demo

Answer 2

试试这个：

var container    = '#content_container';

function container_load(currElementId){
    var data = $("#"+currElementId).attr('data');
    return '<h2 data="'+data+'">'+data+'</h2>';
};

$(function(){
    $('nav')on.('click', 'a', function(){
         var title = container_load(this.id);
        $(container).prepend(title);
    });
});

此处您的问题是，您无法在其他功能中“此”，因为您需要从当前功能传递它。

Answer 3

您的代码中似乎没有错误，范围错误，并且我假设数据属性使用不正确。我想this就是你想要的http://jsfiddle.net/EjEqK/2/

<强> HTML

<nav ><a href="#" data-val="abc">aaa</a></nav>
<div id="content_container"></div>

<强> JS

function container_load() {
var data = $(this).data("val");
var dataObject = { command: data };
$("#content_container").prepend('<h2 data-val="' + dataObject.command + '">' + dataObject.command + '</h2>');
};

$(function () { $('nav > a').on('click', container_load); });

PS：如果您不需要dataObject，请直接使用data

Answer 4

我认为这会对你有所帮助：

function container_load(currElement){
var data = $(currElement).attr('data');
return '<h2 data="'+data+'">'+data+'</h2>';
}

$(function(){
var container    = '#content_container';
    $('nav')on.('click', 'a', function(){
         var title = container_load(this);
        $(container).prepend(title);
    });
});

Answer 5

您可以执行以下操作：

var container = '#content_container',
    title; // make title global

function container_load() {
    var data = $(this).attr('data');
    var dataObject = { command: data };
    title = '<h2 data="' + dataObject.command + '">' + 
        dataObject.command + '</h2>';
};

$(function () {
    $('nav') on.('click', 'a', function () {
        container_load.call(this); // bind this to container_load
        $(container).prepend(title);
    });
});

但你可以做得更好：

$(function () {
    $('nav') on.('click', 'a', function () {
        var data = $(this).attr('data');
        $('#content_container').prepend(
            '<h2 data="' + data + '">' + data + '</h2>'
        );
    });
});

jQuery调用函数内部具有变量的变量

5 个答案: