如何从函数传递多个变量多的jQuery ATTR

Question

这个问题是涉及到：
How to pass multiple variables from funtion to jquery attr

所以上面的链接显示了如何从一个普通的JavaScript函数的多个变量传递到多个jQuery的.attr()功能多种解决方案值。但问题是，如果你想将这些变量发送给多个jQuery函数呢？

这可能听起来很奇怪，因此我会列举一个例子。

$(function() { 
 

 
    function definingVars() { 
 
    var ValueOne = "Sucess with the value on input 1"; 
 
    var IdOne = successWithTheId1; 
 
    var ClassOne = sucessWithTheClass1; 
 
    var ValueTwo = "Sucess with the value on input 2"; 
 
    var IdTwo = successWithTheId2; 
 
    var ClassTwo = sucessWithTheClass2; 
 
    return [ValueOne, IdOne, ClassOne, ValueTwo, IdTwo, ClassTwo]; 
 
    } 
 

 
    $("div:nth-child(1)").attr({ 
 
    // var df = definingVars(); Incorrect syntax!!! 
 
    value: df.ValueOne, 
 
    id: df.IdOne, 
 
    class: df.ClassOne 
 
    }) 
 

 
    $("div:nth-child(2)").attr({ 
 
    // var df = definingVars(); Incorrect syntax!!! 
 
    value: df.ValueTwo, 
 
    id: df.IdTwo, 
 
    class: df.ClassTwo 
 
    }) 
 

 
});

input { 
 
    width: 20em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1"> 
 
    <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2"> 
 
</div>

请不要问关于上下文。这是一个虚拟的例子。

$(function() { 

    function definingVars() { 
    var Value = "Sucess with the value"; 
    var Id = successWithTheId; 
    var Class = sucessWithTheClass; 

    return { 
     value: Value, 
     id: Id, 
     class: Class 
    }; 
    } 

    $("input").attr(definingVars()) 

}); 

这是在与此相关的问题中发布的答案之一。它看起来很美，但看起来不可能将这个相同的概念应用于本问题开头所述的情况。

Answer 1

不知道这是你想要做的。

1. 你错过了一些字符串引号
2. 我存储的属性在数组
3. 你应该靶向输入不是DIV

$(function() { 
 
    function definingVars() { 
 
    var ValueOne = "Sucess with the value on input 1"; 
 
    var IdOne = "successWithTheId1"; 
 
    var ClassOne = "sucessWithTheClass1"; 
 
    var ValueTwo = "Sucess with the value on input 2"; 
 
    var IdTwo = "successWithTheId2"; 
 
    var ClassTwo = "sucessWithTheClass2"; 
 
    return [{value:ValueOne, id:IdOne, class:ClassOne}, {value:ValueTwo, id:IdTwo, class:ClassTwo}]; 
 
    } 
 
    
 
    var df = definingVars(); 
 
    $("input:nth-child(1)").attr(df[0]); 
 
    $("input:nth-child(2)").attr(df[1]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1"> 
 
    <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2"> 
 
</div>

Answer 2

更改了选择器并返回一个对象而不是数组来简化变量统计局。

您可以调用该函数并使用所需的密钥访问对象属性。

$(function() { 
 

 
    function definingVars() { 
 
    console.log("invoked definingVars"); 
 
    return { 
 
     ValueOne: "Sucess with the value on input 1", 
 
     IdOne: "successWithTheId1", 
 
     ClassOne: "sucessWithTheClass", 
 
     ValueTwo: "Sucess with the value on input 2", 
 
     IdTwo: "successWithTheId2", 
 
     ClassTwo: "sucessWithTheClass2" 
 
    }; 
 
    }; 
 

 

 
    $($("div>input")[0]).attr({ 
 

 
    value: definingVars()["ValueOne"], 
 
    id: definingVars()["IdOne"], 
 
    class: definingVars()["ClassOne"] 
 
    }); 
 

 
    $($("div>input")[1]).attr({ 
 
    value: definingVars()["ValueTwo"], 
 
    id: definingVars()["IdTwo"], 
 
    class: definingVars()["ClassTwo"] 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1"> 
 
    <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2"> 
 
</div>