Question

对于令人困惑的标题感到抱歉。

我正在处理此代码：https://jsfiddle.net/8ers54s9/13/

它创建一个简单的文本区域，并将其与字符串中常见单词的预定义数组进行比较。如果有任何匹配，它会更改按钮颜色并显示表格的某些行。尝试输入“cat”和/或“blue”。

该代码功能齐全，但是我需要创建多达20个新阵列/按钮来检查（现在有两个 - 颜色和动物 - 我将添加形式，情感，名称，城市等）。由于代码的优化程度很低，我需要实际复制粘贴每个新数组类型的所有代码。我想知道是否有办法在for循环中创建大部分工作。

我考虑创建一个多维数组，作为“设置”基础，如：

var mainSettings = [
  ["Color", "colorArray", "colorGroup", "colorbutton"],
  ["Animal", "animalArray", "animalGroup", "animalbutton"]
];

只需通过mainSettings [i] [0]，mainSettings [i] [1]等调用它......

然而，我无法实现这个想法（多个未定义的错误）或考虑任何其他错误。什么是最好的方法？

这部分是避免复制的最重要部分：

if (manual.Color == true) {
    $('#colorbutton').removeClass().addClass('button blue');
    $('.colorGroup').show();
    $('#header').show();
}
if (manual.Color == false) {
    if (test.Color == true) {
        $('#colorbutton').removeClass().addClass('button green');
        $('.colorGroup').show();
        $('#header').show();
    }
    if (test.Color == false) $('#colorbutton').removeClass().addClass('button black');
}

if (manual.Animal == true) {
    $('#animalbutton').removeClass().addClass('button blue');
    $('.animalGroup').show();
    $('#header').show();
}
if (manual.Animal == false) {
    if (test.Animal == true) {
        $('#animalbutton').removeClass().addClass('button green');
        $('.animalGroup').show();
        $('#header').show();
    }
    if (test.Animal == false) $('#animalbutton').removeClass().addClass('button black');
}

你可以看到它只是重复代码。

Answer 1

我认为这是一个很好的练习，这是我制作的一个非常简单的原型：

尝试输入绿色＆＃39;或者＆＃39; cat＆＃39;

＆＃13;

/**
  @typedef KeywordButton
  @type {object}
  @property {string} id - the button ID, must be unique
  @property {string[]} keywords - a string array of keywords
  @property {string} title - The button title
  @property {string} color - The button border color
 */

function KeywordWidget(inputSelector, buttonsSelector) {
  this.$input = $(inputSelector);
  this.$buttons = $(buttonsSelector);
  var _keywordButtons = [];
  var widget = this;
  
  // register input event
  this.$input.on('input', function() {
    var text = widget.$input.val();
    _keywordButtons.forEach(function(keywordButton) {
      var keywords = keywordButton.keywords;
      var button = widget.$buttons.find('#' + keywordButton.id);
      var keywordExixts = keywords.some(function(v) {
        return text.indexOf(v) > -1;
      });
      if (keywordExixts) button.css('border-color', keywordButton.color);
      else button.css('border-color', 'black');
    });
  });

  /**
   * function to add new button
   * @param {KeywordButton} keywordButton - a keyword button config object
   */
  this.add = function(keywordButton) {
    if (_idExists(keywordButton.id)) throw new Error("id: " + keywordButton.id + " already exists");
    _keywordButtons.push(keywordButton);
    var $button = $('<button type="button" class="button">' + keywordButton.title + '</button>');
    $button.attr("id", keywordButton.id);
    this.$buttons.append($button);
  }

  // helper to check if id exists
  function _idExists(id) {
    return _keywordButtons.some(function(button) {
      button.id === id
    });
  }
}

var w = new KeywordWidget("#input", "#buttons");
// add color button
w.add({
  id: "color",
  title: "Color",
  keywords: ["green", "blue"],
  color: "red"
});
// add animal button
w.add({
  id: "animal",
  title: "Animal",
  keywords: ["dog", "cat"],
  color: "blue"
});

＆＃13;

.button {
  background-color: white;
  color: black;
  border-radius: 4px;
  border: 2px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea id="input" placeholder="Test one" rows="4" cols="50"></textarea>
</div>
<div id="buttons">

＆＃13;

通过循环内的动态id和类访问多个元素（多维数组？）

1 个答案: