Javascript 试图通过根据要传递的变量使函数动态化来简化函数

我不知道如何表达我正在尝试做什么，但如果你看我的代码，你会很快看到。我相信我已经接近完成我想做的事情了，但是我遗漏了一些小细节。如果有人能帮忙，我将不胜感激。 基本上，我试图缩短我的代码，使其更具动态性

问题是

healthSign

没有正确获取类。当我查看检查器时，这就是输出的

，而它应该是

我认为混淆之处在于我试图将变量作为字符串和对象传递，而我没有使用正确的标点符号或语法

以下是我的jquery：

$("#click").click(function () {
    var func = $("#run").val(),
        signP = $('.signImage').find('p'),
        bodyConditionP = $('#bodyCondition').find('p'),
        reproductionP = $('#reproduction').find('p'),
        weaningWeightsP = $('#weaningWeights').find('p'),
        healthSign = $('.signImage');
    signP.empty();
    bodyConditionP.empty();
    reproductionP.empty();
    weaningWeightsP.empty();
    console.log(func);

    function blah(healthValue) {
        signP.append(healthValue.sign);
        healthSign.attr('class', 'signImage');
        alert(healthValue);
        healthSign.addClass("' + healthValue + '");
        signP.append(healthValue.sign);
        bodyConditionP.append(healthValue.bodyCondition);
        reproductionP.append(healthValue.reproduction);
        weaningWeightsP.append(healthValue.weaningWeights);
    }
    if (func === 'good') {
        blah(good);
    }
    else if (func === 'moderate') {
        blah(moderate);
    }
    else if (func === 'poor') {
        blah(poor);
    }
});

这是我脚本的较长版本：

$("#click").click(function () {
    var func = $("#run").val(),
        signP = $('.signImage').find('p'),
        bodyConditionP = $('#bodyCondition').find('p'),
        reproductionP = $('#reproduction').find('p'),
        weaningWeightsP = $('#weaningWeights').find('p'),
        healthSign = $('.signImage');
    signP.empty();
    bodyConditionP.empty();
    reproductionP.empty();
    weaningWeightsP.empty();
    console.log(func);
    if (func === 'good') {
        console.log('good');
        signP.append(good.sign);
        healthSign.attr('class', 'signImage');
        healthSign.addClass('good');
        signP.append(good.sign);
        bodyConditionP.append(good.bodyCondition);
        reproductionP.append(good.reproduction);
        weaningWeightsP.append(good.weaningWeights);
    }
    else if (func === 'moderate') {
        console.log('moderate');
        signP.append(moderate.sign);
        signP.append(good.sign);
        healthSign.attr('class', 'signImage');
        healthSign.addClass('moderate');
        signP.append(moderate.sign);
        bodyConditionP.append(moderate.bodyCondition);
        reproductionP.append(moderate.reproduction);
        weaningWeightsP.append(moderate.weaningWeights);
    }
    else if (func === 'poor') {
        console.log('poor');
        signP.append(poor.sign);
        healthSign.attr('class', 'signImage');
        healthSign.addClass('poor');
        signP.append(poor.sign);
        bodyConditionP.append(poor.bodyCondition);
        reproductionP.append(poor.reproduction);
        weaningWeightsP.append(poor.weaningWeights);
    }
});

那行试试看

tempVar = healthValue.toString();
healthSign.addClass(tempVar);

---

您的问题是因为

healthValue

是一个对象。您需要用于获取对象的字符串，即

func

：

healthSign.addClass(func);

---

<>你有机会进一步改进你可能会考虑的代码。

• 没有理由使用函数

  blah（）

  。相反，在运行代码之前，将

  healthValue

  赋值给变量
• 将

  良好

  、

  中等

  和

  较差

  存储为对象的属性，以便 您可以通过属性名访问它们，如果 声明
• 在一次操作中设置

  healthSign

  的类别
• 您只需执行

  $（“.someSelector p”）

  即可，而不必执行

  $（.someSelector”）.find（“p”）

• 只要选择元素，就可以调用

  .empty（）

  。这是个人喜好。它将8行代码转换为4行，但有争议的是，它会使代码不那么明显
• 您正在将

  healthValue.sign

  添加到

  signP

  两次。那是故意的吗？如果是这样，那可以是一个电话

你真的不需要所有这些变量。您可以将其缩短一点：

var healthValues = {
    good: good,
    moderate: moderate,
    poor: poor
};

$("#click").click(function () {
    var func = $("#run").val(),
        healthValue = healthValues[func];
    $('.signImage p').empty().append(healthValue.sign, healthValue.sign);
    $('#bodyCondition p').empty().append(healthValue.bodyCondition);
    $('#reproduction p').empty().append(healthValue.reproduction);
    $('#weaningWeights p').empty().append(healthValue.weaningWeights);
    $('.signImage').attr('class', 'signImage ' + func);
});

---

你有错误吗？它当前在做什么，应该做什么？没有错误，它传递对象信息，但不添加新类。它将该类添加为一个对象，而我认为healthSign.addClass（“+healthValue+”）显然不起作用；这就是问题所在。当我看inspector时，这就是应该输出的内容。我几乎肯定您的解决方案会起作用，但它仍然将类作为对象添加。这是当我在inspector中查看dom时的输出，我不确定moethod toString为什么没有效果。alos当我从click事件中取出函数blah（）时，它不会完全工作。这意味着它不仅不会添加类，而且不会传递任何对象

var healthValues = {
    good: good,
    moderate: moderate,
    poor: poor
};

$("#click").click(function () {
    var func = $("#run").val(),
        signP = $('.signImage p').empty(),
        bodyConditionP = $('#bodyCondition p').empty(),
        reproductionP = $('#reproduction p').empty(),
        weaningWeightsP = $('#weaningWeights p').empty(),
        healthSign = $('.signImage'),
        healthValue = healthValues[func];

    signP.append(healthValue.sign, healthValue.sign);
    healthSign.attr('class', 'signImage ' + func);
    bodyConditionP.append(healthValue.bodyCondition);
    reproductionP.append(healthValue.reproduction);
    weaningWeightsP.append(healthValue.weaningWeights);
});

var healthValues = {
    good: good,
    moderate: moderate,
    poor: poor
};

$("#click").click(function () {
    var func = $("#run").val(),
        healthValue = healthValues[func];
    $('.signImage p').empty().append(healthValue.sign, healthValue.sign);
    $('#bodyCondition p').empty().append(healthValue.bodyCondition);
    $('#reproduction p').empty().append(healthValue.reproduction);
    $('#weaningWeights p').empty().append(healthValue.weaningWeights);
    $('.signImage').attr('class', 'signImage ' + func);
});