获取与输入类型文件字段关联的标签的ID

Question

我有一个要求，我必须获取与输入类型文件字段关联的标签的ID。我有一组4个输入类型的文件字段，其中包含id＆＃39的photo1，photo2，photo3，photo4。与这些文件字段关联的标签分别是label-1，label-2，label-3和label-4。我的要求是我想获得相应的标签字段并更新标签的文本。这是我到目前为止所尝试过的。

.wrap {
  background-color: #393939;
  height: inherit;
}


/*-----------------------header---------------------------------------------------------*/

.header-inner {
  background-color: #393939;
  width: 100%;
  height: 70px;
  /* [disabled]display: flex; */
  position: fixed;
  z-index: 2; /* to place this on top of footer */
  top: 0;
}

.pclogo {
  display: none;
}

.tabletlogo {
  display: none;
}

.line {
  display: none;
}

a .mobilelogo {
  width: 215px;
  height: auto;
  margin-top: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  cursor: pointer;
}


/*doesn't show the navigation bar*/

.navbar {
  display: none
}


/*---------------------hamburger-----------------------*/

.hamburger {
  display: block;
  position: absolute;
  top: 10px;
  right: 3.3%;
  cursor: pointer;
  float: right;
  z-index: 2 /*important!!! humburger menu comes on the top of side menu*/
}

.bar1,
.bar2,
.bar3 {
  width: 26px;
  height: 3px;
  /* Original 5px*/
  margin: 8px 0;
  /* Original 6px*/
  transition: 0.6s;
  background-color: white;
  border-radius: 3px;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: translate(0px, 5.5px) rotate(-45deg);
  /*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
  transform: translate(0px, 5.5px) rotate(-45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/* Fade out the second bar */


/*.change .bar2 {
			opacity: 0;
		}*/


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: translate(0px, -5.5px) rotate(45deg);
  transform: translate(0px, -5.5px) rotate(45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/*---dropdown menu---*/

.dropdown {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  /*important!!! humburger menu comes on the top of side menu*/
  top: 0;
  right: 0;
  background-color: #393939;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align: center;
}

.dropdown a {
  display: none;
  transition: 0.4s;
}


/*---dropdown menu withdraw---*/

.change.dropdown {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1; /* below hamburger */
  top: 0;
  right: 0;
  background-color: rgba(69, 69, 69, 0.90);
  /*Color Transparency of side menu*/
  overflow-x: hidden;
  transition: 0.6s;
  padding: 68px 0 0 0;
  /* control the space above "Home"*/
  text-align: center;
}


/*---dropdown menu effect---*/

.change.dropdown a {
  padding: 10px 5px;
  font-family: 'Kozuka Gothic Pr6N';
  font-size: 18px;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  border-bottom: rgba(163, 161, 161, 0.77);
}

.dropdown a::before {
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  content: attr(data-hover);
  /*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}

.dropdown a:hover {
  border-left: 2px solid rgba(255, 255, 255, 0.70);
  border-right: 2px solid rgba(255, 255, 255, 0.70);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
  color: rgba(255, 255, 255, 0.70);
}


/*---------------------hamburger---------------------------*/


/*---------------------------------------------header----------------------------------------------*/


/*----------------------------------------------Main----------------------------------------------*/

.main-inner {
  min-height: 100%;
  height: auto !important;
  /*Cause footer to stick to bottom in IE 6*/
  height: 100%;
  vertical-align: bottom;
  padding-top: 70px;
  /*-------important!!!!!-------*/
}

.slideimage-container img {
  height: inherit;
  width: 100%;
  /* [disabled]padding-top: 90px; */
  /* [disabled]padding-bottom: 70px; */
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}


/*----------update list-----------*/

.update-container {
  padding: 5px;
  width: 100%;
}

.update-container table {
  margin: 0 auto;
}

.update-container table tr {
  color: white;
  font-size: 10px;
  font-family: 'Kozuka Gothic Pr6N';
  text-align: left;
  font-weight: thin;
  padding: 5px 10px;
  vertical-align: top;
}


/*----------------------------------------------Main----------------------------------------------*/


/*----------------------------------------------Footer----------------------------------------------*/

.footer-inner {
  width: 100%;
  /* [disabled]padding-top: 15px; */
  /*space between Main and Footer*/
  height: 28px;
  bottom: 0;
  position: fixed;
  background-color: #393939;
  z-index: 1;
}

.line-footer {
  display: none;
  /* [disabled]width: 100%; */
  /* [disabled]height: 1px; */
  /* [disabled]border-bottom: 1px solid white; */
  /* [disabled]margin-bottom: 15px; */
  /* [disabled]position: absolute; */
}

.copyright {
  width: 100%;
  float: right;
  font-family: 'Kozuka Gothic Pr6N';
  color: #ffffff;
  font-size: 0.5px;
  bottom: 0px;
  padding: 10px 5px 0 0;
  /* [disabled]margin-right: 5px; */
  text-align: right;
  /* [disabled]position: absolute; */
}

我有4个这样的div类。这是javascript。

<body oncontextmenu="return false">

  <div class="wrap">
    <!-- to define the maximum width -->

    <!-- Header -->
    <header>
      <div class="container">
        <div class="header-inner">
          <!-- Header Flex (logo and navbar) -->





          <!-- Hamburger -->

          <div class="hamburger" onclick="myFunction(this)">
            <div class="bar1"></div>
            <!-- <div class="bar2"></div> -->
            <div class="bar3"></div>
          </div>



          <div id="myDIV" class="dropdown" role="navigation">
            <a href="index.html">Home</a>
            <a href="News/index.html">News</a>
            <a href="Concept/index.html">Concept</a>
            <a href="Profile/index.html">Profile</a>
            <a href="Works/index.html">Works</a>
            <a href="Contact/index.html">Contact</a>
          </div>


          <!-- x is used to change hamburger menu, y is used to change side menu width -->
          <script>
            function myFunction(x) {
              x.classList.toggle("change");

              var y = document.getElementById("myDIV");
              y.classList.toggle("change");
            }
          </script>


          <!-- Hamburger -->




          <ul class="navbar" role="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="News/index.html">News</a></li>
            <li><a href="Concept/index.html">Concept</a></li>
            <li><a href="Profile/index.html">Profile</a></li>
            <li><a href="Works/index.html">Works</a></li>
            <li><a href="Contact/index.html">Contact</a></li>
          </ul>

          <div class="line"></div>
        </div>
      </div>





    </header>



    <!-- Main Content -->
    <main>
      <div class="container">
        <div class="main-inner">
        </div>
      </div>




      <div class="container">
        <div class="update-container">
        </div>
      </div>



    </main>
    <!-- End Main Content -->



    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-inner">
          <div class="line-footer"></div>
          <div class="copyright">
            Copyright © 小野寺康都市設計事務所. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
    <!-- End Footer -->
  </div>
</body>

感谢任何帮助。我想获取与每个输入类型文件字段关联的标签的ID。提前谢谢。

Answer 1

标签和输入字段由标签的for链接，即输入的id。您可以简单地利用该链接

function getLabelID(input){
    return $("label['for=" + $(input).attr("id") + "']").attr("id");
}