1. 首頁
  2. 問答
  3. 將Javascript代碼應用於多個元素

將Javascript代碼應用於多個元素

2014-09-28 55 views
0

我想要將特定的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

+1

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

+0

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

+0

首先，你應該改變你的ID，因爲你在每一行中使用相同的ID。一個id必須是唯一的。只需將ID更改爲類，至今不必太多，您必須調整。 – 2014-09-28 01:02:47

回答

2

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

+0

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

相關問題

 相關問題