在单击的链接旁边添加跨度

Question

我的目标是根据用户点击自动将信息附加到表单。

具体来说，当用户点击以下某个＆＃39; Book＆＃39;链接：

我希望其旁边的隐藏范围中的信息自动填充到标有＆＃39;课程＆＃39;

的表单输入中

我计划使用在点击时创建的变量，然后将其附加到表单中，但是我不知道如何创建一个以兄弟范围为目标的变量。

JSfiddle演示： https://jsfiddle.net/cm4Lu2ch/

＆＃13;

＆＃13;

$('.mailenquiry').click(function(e) {
  var nearestspan = 'How do I target the hidden span next to the clicked on link?'
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

table.table td span {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="theTable" class="footable table outerBorder footable-loaded">
  <thead>
    <tr>
      <th id="thCol0" data-type="alpha">Date</th>
      <th id="thCol1" data-type="alpha">Module</th>
      <th id="thCol2" data-type="alpha">Price</th>
      <th id="thCol3" data-type="alpha">Venue</th>
      <th>Enquire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon 11/Dec/17</td>
      <td>Foo 1</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 1 on Mon 11/Dec/17</span></td>
    </tr>
    <tr>
      <td>Tue 12/Dec/17</td>
      <td>Foo 2</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 2 on Tue 12/Dec/17</span></td>
    </tr>
  </tbody>
</table>
<br><br>
<a id="contact-now"></a>
<form class="custom-contact" action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="name">Course:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

$('.mailenquiry').click(function(e) {
  var nearestspan = $(this).next().html();
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

table.table td span {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="theTable" class="footable table outerBorder footable-loaded">
  <thead>
    <tr>
      <th id="thCol0" data-type="alpha">Date</th>
      <th id="thCol1" data-type="alpha">Module</th>
      <th id="thCol2" data-type="alpha">Price</th>
      <th id="thCol3" data-type="alpha">Venue</th>
      <th>Enquire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon 11/Dec/17</td>
      <td>Foo 1</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 1 on Mon 11/Dec/17</span></td>
    </tr>
    <tr>
      <td>Tue 12/Dec/17</td>
      <td>Foo 2</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 2 on Tue 12/Dec/17</span></td>
    </tr>
  </tbody>
</table>
<br><br>
<a id="contact-now"></a>
<form class="custom-contact" action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="name">Course:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有几种方法可以做到这一点：

1）上一级到父级

转到parent()和find() span，然后获取文字并将其存储在nearestspan变量中

$('.mailenquiry').click(function(e) {
  var nearestspan = $(this).parent().find('span').text();
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

＆＃13;

$('.mailenquiry').click(function(e) {
  var nearestspan = $(this).parent().find('span').text();
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

table.table td span {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="theTable" class="footable table outerBorder footable-loaded">
  <thead>
    <tr>
      <th id="thCol0" data-type="alpha">Date</th>
      <th id="thCol1" data-type="alpha">Module</th>
      <th id="thCol2" data-type="alpha">Price</th>
      <th id="thCol3" data-type="alpha">Venue</th>
      <th>Enquire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon 11/Dec/17</td>
      <td>Foo 1</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 1 on Mon 11/Dec/17</span></td>
    </tr>
    <tr>
      <td>Tue 12/Dec/17</td>
      <td>Foo 2</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 2 on Tue 12/Dec/17</span></td>
    </tr>
  </tbody>
</table>
<br><br>
<a id="contact-now"></a>
<form class="custom-contact" action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="name">Course:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

2）获取下一个元素

您可以使用next()并以此方式获得跨度

$('.mailenquiry').click(function(e) {
  var nearestspan = $(this).next().text();
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

＆＃13;

$('.mailenquiry').click(function(e) {
  var nearestspan = $(this).next().text();
  $('.custom-contact div:nth-of-type(2) input').val(nearestspan);
});

＆＃13;

table.table td span {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="theTable" class="footable table outerBorder footable-loaded">
  <thead>
    <tr>
      <th id="thCol0" data-type="alpha">Date</th>
      <th id="thCol1" data-type="alpha">Module</th>
      <th id="thCol2" data-type="alpha">Price</th>
      <th id="thCol3" data-type="alpha">Venue</th>
      <th>Enquire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon 11/Dec/17</td>
      <td>Foo 1</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 1 on Mon 11/Dec/17</span></td>
    </tr>
    <tr>
      <td>Tue 12/Dec/17</td>
      <td>Foo 2</td>
      <td>£55 (+VAT &amp; DVSA Upload)</td>
      <td>London</td>
      <td><a class="mailenquiry" href="#contact-now">Book</a><span>Enquiry about Foo 2 on Tue 12/Dec/17</span></td>
    </tr>
  </tbody>
</table>
<br><br>
<a id="contact-now"></a>
<form class="custom-contact" action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="name">Course:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;