将Javascript代码应用于多个元素

我想要将特定的Javascript代码同时应用于多个元素，我该怎么做？我有一个页面，其中包括添加学生的表格，每个学生都有他自己的生日，我有3个选择器（日，月和年），所以3个选择器和每个选择器都有它的价值。我想将这些选择器值复制到另一个输入，在每次发生这种选择器更改时，数据将在该输入中更新，我已成功完成此操作，但希望将其应用于页面上的所有元素，每页有50名学生，代码只运行第一个元素。将Javascript代码应用于多个元素

这里，我呼吁每一个变化的功能，将发生于每个单独的选择：

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; 
}

所附表格的图片：

enter image description here

这里的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>

来源

2014-09-28 Amro Shahbari

至少显示2位学生的html部分 – 2014-09-28 00:25:23

我已经添加了他们！ – 2014-09-28 00:35:31

首先，你应该改变你的ID，因为你在每一行中使用相同的ID。一个id必须是唯一的。只需将ID更改为类，至今不必太多，您必须调整。 – 2014-09-28 01:02:47

getElementById()只得到e指定的第一个元素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，但它说明了我的解决方案。

来源

2014-09-28 02:32:14 JME

非常欢迎Amro！ :-) – JME 2014-09-28 12:58:27

将Javascript代码应用于多个元素

回答

相关问题