如何從函數傳遞多個變量多的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>