Question

我在试图找出这个逻辑时遇到了很多问题。让我在这里登台：

在HTML中有一些表单/输入元素类型为radio。他们每个人都分配了一个ID。

<form>
  <input type="radio" name="oneAllowed" id="yesterday" />
  <input type="radio" name="oneAllowed" id="today" />
  <input type="radio" name="oneAllowed" id="tomorrow" />
</form>

使用Javascript本质上我想要做的是遍历3个对象，因为它们都在HTML中分配了相同的名称，只能选择一个，无论哪一个返回true我想抓住那个结果然后访问第二个键：值对，例如'commitY yesterday'，它将是'commitY yesterday.hasValue（）;'并将其发送到不同的函数进行其他计算。

var urgentOrderSelector = function(){

    var commitYesterday = {
        isChecked: document.getElementById("yesterday").checked,
        hasValue: function(){
            if (this.isChecked == true) {
                return 3;
            };
        };
    };

    var commitToday = {
        isChecked: document.getElementById("today").checked,
        hasValue: function(){
            if (this.isChecked == true) {
                return 2;
            };
        };
    };

    var commitTomorrow = {
        isChecked: document.getElementById("tomorrow").checked,
        hasValue: function(){
            if (this.isChecked == true) {
                return 1;
            };
        };
    };

    var urgentArray = [commitYesterday.isChecked, commitToday.isChecked, commitTomorrow.isChecked];

    for(var i = 0; i <= urgentArray.length-1; i++){
        if (urgentArray[i].isChecked == true) {

            //This is where I am stuck.  I was thinking of doing perhaps the following:
            return urgentArray[i].hasValue();
        };
    }


};

Answer 1

为什么不将HTML更改为：

<form>
  <input type="radio" name="oneAllowed" id="yesterday" value="3" />
  <input type="radio" name="oneAllowed" id="today" value="2" />
  <input type="radio" name="oneAllowed" id="tomorrow" value="1" />
</form>

并使用document.querySelector获取所选元素：

document.querySelector('[type="radio"][name="oneAllowed"]:checked').value

如果您确实需要依赖于选中哪个单选框来运行特定功能，您可以为每个输入添加一个属性data-fn="fnName"，然后使用键作为函数创建一个对象：

var fns = {'fnName1': function () {}, 'fnName2': function() {} …};

然后调用属性定义的函数：

fns[document.querySelector('[type="radio"][name="oneAllowed"]:checked').getAttribute('data-fn')]();

Answer 2

不完全确定您的最终目标是什么。

但这是一个更简化的逻辑版本。希望它有所帮助。

var urgentOrderSelector = function(){
  var radioDict = {'yesterday':3, 'today':2, 'tomorrow':1};
  return radioDict[$('input[name=oneAllowed]:checked').attr('id')];
};

或者，如果你想根据选择执行一些函数，你可以存储函数指针并相应地执行它们，即：

var funcYesterday = function(){alert('yesterday');};
var funcToday = function(){alert('today');};
var funcTomorrow = function(){alert('tomorrow');};

var funcUrgentOrder = function(){
  var radioDict = {
      'yesterday' : funcYesterday, 
      'today'     : funcToday, 
      'tomorrow'  : funcTomorrow
  };
  return radioDict[$('input[name=oneAllowed]:checked').attr('id')]();
};

或者，更简单，因为您正在使用＆＃39;值＆＃39;无线电上的财产：

function urgentOrderSelector = function() {
    return $('input[name=oneAllowed]:checked').val(); 
};

使用Objects，Array和Booleans的棘手Javascript逻辑

2 个答案: