将Javascript代码应用于多个元素
我正在尝试将特定的Javascript代码同时应用于多个元素，我该怎么做？ 我有一个页面，其中包括添加学生的表格，每个学生都有他自己的生日，我有3个选择器（日，月和年），所以3个选择器和每个选择器都有它的价值。 我想将这些选择器值复制到另一个输入，每次更改发生在这个选择器上，数据将在该输入中更新，我已经成功完成了，但是想要将它应用于页面上的所有元素，可能会有每个页面中有50名学生，代码仅针对第一个元素运行。
这是我调用每个单独选择器发生的每个更改的函数：
function copyDiv() {
var e = document.getElementById("dayb");
var dayb = e.options[e.selectedIndex].value;
var e2 = document.getElementById("monthb");
var monthb = e2.options[e2.selectedIndex].value;
var e3 = document.getElementById("yearb");
var yearb = e3.options[e3.selectedIndex].value;
var typedb = document.getElementById("typedbirthday");
typedb.value = dayb + " / " + monthb + " / " + yearb;
}
表格的附图：
这也是HTML代码：
<div class="f-table-bnp">
<div class="f-table-header">
<div class="table-h-c1">Num.</div>
<div class="table-h-c2">Name</div>
<div class="table-h-c3">Add Picture</div>
<div class="table-h-c4">Birthday</div>
<div class="table-h-c5"></div>
</div>
<div class="f-table-row1">
<div class="table-h-c1 table-r1-c1">
<div class="r1-c1-text member_number"> 1 </div>
<div class="r1-c1-input"><input type="checkbox" checked=""></div>
</div>
<div class="table-h-c2 table-r1-c2">
<div class="r1-c2-input">
<input type="text" name="family[1][member][1][name]" value="asdsd" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
</div>
</div>
<div class="table-h-c3 table-r1-c3">
<input type="hidden" name="fr" value="11">
<div class="r1-c3-btn"><input type="file" class="photoimg" id="11" data-family-id="1" data-member-id="1"></div>
<div id="img11" class="r1-c3-img">
<input type="hidden" name="family[1][member][1][photo]" value="uploads/14118608306_10200384523890033_1961108332_n.jpg">
</div>
</div>
<div class="table-h-c4 table-r1-c4">
<div class="select-date-row">
<select name="family[1][member][1][dob][day]" id="dayb" onchange="copyDiv()">
<option value="">Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>21</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="family[1][member][1][dob][month]" id="monthb" onchange="copyDiv()">
<option value="">Month</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="family[1][member][1][dob][year]" id="yearb" onchange="copyDiv()">
<option value="">Year</option>
<option>1990</option>
<option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>
</select>
</div>
<div class="type-date">
<input id="typedbirthday" name="family[1][member][1][dob][date]" value="4 / 11 / 1912" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
</div>
</div>
<div class="table-h-c5 table-r1-c5">
<p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
</div>
</div>
<div class="f-table-row1">
<div class="table-h-c1 table-r1-c1">
<div class="r1-c1-text member_number"> 2 </div>
<div class="r1-c1-input"><input type="checkbox" checked=""></div>
</div>
<div class="table-h-c2 table-r1-c2">
<div class="r1-c2-input">
<input type="text" name="family[1][member][2][name]" value="asdasdasdas" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
</div>
</div>
<div class="table-h-c3 table-r1-c3">
<input type="hidden" name="fr" value="12">
<div class="r1-c3-btn"><input type="file" class="photoimg" id="12" data-family-id="1" data-member-id="2"></div>
<div id="img12" class="r1-c3-img">
<img style="width:68;height:70;" width="68" height="70" src="images/upload-img.png" alt="">
<input type="hidden" name="family[1][member][2][photo]" value="">
</div>
</div>
<div class="table-h-c4 table-r1-c4">
<div class="select-date-row">
<select name="family[1][member][2][dob][day]" id="dayb" onchange="copyDiv()">
<option value="">Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>21</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="family[1][member][2][dob][month]" id="monthb" onchange="copyDiv()">
<option value="">Month</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="family[1][member][2][dob][year]" id="yearb" onchange="copyDiv()">
<option value="">Year</option>
<option>1990</option>
<option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>
</select>
</div>
<div class="type-date">
<input id="typedbirthday" name="family[1][member][2][dob][date]" value="5.5.1905" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
</div>
</div>
<div class="table-h-c5 table-r1-c5">
<p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
</div>
</div>
<div class="f-table-row1">
<div class="table-h-c1 table-r1-c1">
<div class="r1-c1-text member_number"> 3 </div>
<div class="r1-c1-input"><input type="checkbox" checked=""></div>
</div>
<div class="table-h-c2 table-r1-c2">
<div class="r1-c2-input">
<input type="text" name="family[1][member][3][name]" value="asdasdsadasdasdadd" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
</div>
</div>
<div class="table-h-c3 table-r1-c3">
<input type="hidden" name="fr" value="13">
<div class="r1-c3-btn"><input type="file" class="photoimg" id="13" data-family-id="1" data-member-id="3"></div>
<div id="img13" class="r1-c3-img">
<img style="width:68;height:70;" width="68" height="70" src="images/upload-img.png" alt="">
<input type="hidden" name="family[1][member][3][photo]" value="">
</div>
</div>
<div class="table-h-c4 table-r1-c4">
<div class="select-date-row">
<select name="family[1][member][3][dob][day]" id="dayb" onchange="copyDiv()">
<option value="">Date</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>21</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="family[1][member][3][dob][month]" id="monthb" onchange="copyDiv()">
<option value="">Month</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="family[1][member][3][dob][year]" id="yearb" onchange="copyDiv()">
<option value="">Year</option>
<option>1990</option>
<option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>
</select>
</div>
<div class="type-date">
<input id="typedbirthday" name="family[1][member][3][dob][date]" value="" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
</div>
</div>
<div class="table-h-c5 table-r1-c5">
<p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：2)
getElementById()仅获取具有指定id的第一个元素。相反，您应根据已更改的select元素确定要处理的select元素。
就个人而言，我会考虑使用诸如jQuery之类的库来简化DOM操作，但这里有一个如何在纯JavaScript中执行它的示例，没有任何依赖。
将每个onchange="copyDiv()"中的所有select更改为onchange="copyDiv(this)"
<select name="..." id="..." onchange="copyDiv(this)">
然后使用以下JavaScript：
function getSiblings(elem, skip) {
var r = [],
n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n != skip) {
r.push( n );
}
}
return r;
}
function copyDiv(elem) {
var siblings = getSiblings(elem),
parentSiblings = getSiblings(elem.parentNode),
typedb, dayb, monthb, yearb;
for(var i=0; i < siblings.length; i++) {
if (siblings[i].id === 'dayb') {
dayb = siblings[i].value;
}
if (siblings[i].id === 'monthb') {
monthb = siblings[i].value;
}
if (siblings[i].id === 'yearb') {
yearb = siblings[i].value;
}
}
for(i=0; i < parentSiblings.length; i++) {
if (parentSiblings[i].className === 'type-date') {
typedb = parentSiblings[i].children[0];
typedb.value = dayb + " / " + monthb + " / " + yearb;
}
}
}
此代码非常依赖于您当前的HTML结构，因此对HTML的更改可能会使此代码无效。但至少你知道如何解决你的问题。
这是一个简化的工作小提琴http://jsfiddle.net/JohnnyEstilles/15nhktbw/。它只有两行select-date-row和type-date，但它说明了我的解决方案。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？