如何将Javascript绑定到Html？（W /例）

-3

假设我有学校的JavaScript对象数组...如何将Javascript绑定到Html？（W /例）

schools = 

[ 
    {name: "School A", phone: "Phone A", location: "Location A"}, 
    {name: "School B", phone: "Phone B", location: "Location B"}, 
    {name: "School C", phone: "Phone C", location: "Location C"}, 
    ... 
]

...我想，以显示段落标记学校名称...

<p>School A</p> 
<p>School B</p> 
<p>School C</p>

...当我点击一个给定的学校段落，我想显示在一个单独的窗格中的附加信息...

<div id="separate-pane"> 
    <p>Phone A</p> 
    <p>Address A</p> 
</div>

我怎么去引用正确javasc当点击给定的学校名称段落时，是否会触及对象？

来源

2017-02-10 Mike B

什么是你想要的结果？你试过什么了？ – AmericanUmlaut

多一个属性（值）添加到用相同的颜色名称每个复选框：

<input type="checkbox" value="red">

..然后当你遍历所有的复选框，并找到检查 - 喜欢的东西让他们的价值：

var color = chkObject.value

来源

2017-02-10 22:25:45 Alexey

我相信这是我正在寻找的，因为如果页面被翻译成西班牙语或其他语言，所有其他答案将不再反映最初的数组。这是我的问题最常见的解决方案，这究竟是什么？这是数据绑定吗？正如你所看到的，我真的不知道如何说出我的问题。如果我的JavaScript数组由对象而不是字符串组成，我该怎么办？ –

我不知道这个方法是否有名称:) **值**是复选框输入的绝对正常属性。关于你的问题 - 在你的主要问题中，你需要展示你想要得到的例子结果。如果你需要一个字符串数组 - ** chkObject.value **会给你一个字符串，如果你需要一个对象数组 - 我们需要知道为什么和什么样的对象？！ ..我们希望看到你期望的结果的例子 – Alexey

所以我用这个jquery 2.1.1。

(function(){ 
 
    $(function(){}) 
 
    var colors = [] 
 
    $('#compile-button').click(function() { 
 
    console.log('clicked button'); 
 
     $("#checkboxes-container").find("input").each(function(index, input){ 
 
     if($(input).is(':checked')){ 
 
      console.log("Checked") 
 
      colors.push($(input).siblings('p').text()); 
 
     } 
 
     }); 
 
    console.log('Colors selected: ', colors); //do what you want here with colors 
 
    }); 
 
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="checkboxes-container"> 
 
    <div> 
 
     <p>red</p> 
 
     <input type="checkbox" /> 
 
    </div> 
 
    <div> 
 
     <p>green</p> 
 
     <input type="checkbox" /> 
 
    </div> 
 
    <div> 
 
     <p>blue</p> 
 
     <input type="checkbox" /> 
 
    </div> 
 
    <button id="compile-button">Compile</button> 
 
</div>

来源

2017-02-10 22:26:10 matt

使用普通的香草JS（无需jQuery库），以帮助你开始一个例子。这段代码将显示已检查了多少项目，您可以根据需要更改代码。

它是如何工作：

定义，你列出你的复选框ID的数组。
检测点击您的按钮。
在数组中查询DOM的id。
检查每个复选框是否被选中。
将每个选中的复选框添加到数组中。
返回数组。

(function() { 
 
    var data = ['red', 'green', 'blue']; 
 
    document.getElementById('btn').addEventListener('click', function(event) { 
 
check(); 
 
    }); 
 
    var check = function() { 
 
var nodes = []; 
 
data.forEach(function(item) { 
 
    var node = document.getElementById(item); 
 
    if (node.checked) { 
 
    nodes.push(node); 
 
    } 
 
}); 
 
alert('selected: ' + nodes.length); 
 
return nodes; 
 
    }; 
 
})();

<div> 
 
    <p>red</p> 
 
    <input id="red" type="checkbox" /> 
 
</div> 
 
<div> 
 
    <p>green</p> 
 
    <input id="green" type="checkbox" /> 
 
</div> 
 
<div> 
 
    <p>blue</p> 
 
    <input id="blue" type="checkbox" /> 
 
</div> 
 
<button id="btn" type="button">Click Me!</button>

来源

2017-02-10 22:31:34 GibboK

<html> 

<head> 
</head> 

<body> 
    <script type="javascript"> 
    function colors(col) { switch (col) { case 'red': document.bgColor = "#FF0000"; break; case 'green': document.bgColor = "#00FF00"; break; case 'blue': document.bgColor = "#0000FF"; break; } } 
    </script> 
    <form name="form1" method="post" action=""> 
    <p> 
     <label> 
     <input type="radio" name="Colors" value="radio" onClick="colors('red')"> Red 
     </label> 
     <br> 
     <label> 
     <input type="radio" name="Colors" value="radio" onClick="colors('green')"> Green 
     </label> 
     <br> 
     <label> 
     <input type="radio" name="Colors" value="radio" onClick "colors('blue')"> Blue 
     </label> 
     <br> </p> 
    </form> 
</body> 

</html>

来源

2017-02-10 22:47:03 varunkumar

如何将Javascript绑定到Html？ （W /例）

回答

相关问题

如何将Javascript绑定到Html？（W /例）