Question

我正在编码音乐程序的申请表。该程序是根据日期应用的。当前静态内容，每个程序都有很多日期。我需要找到一种对“应用按钮”进行编码的方法，以便它可以“动态”地在参数中获取日期和程序。这是我的jsfiddle

$('a.ApplyNowDate').attr('href', function() {
  return 'http://schoolofofrock.com/?programme=Reggae&date=' + $(this).prev().text() + '/';
})

.ApplyNowDate,
.ApplyNowDate:hover {
  background: #e91e63;
  color: #fff;
  display: inline-block;
  font-size: smaller;
  padding: 5px 10px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vc_tta-panel-body">
  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Programme</strong>&nbsp;<span class="TheProgramme">Reggae</span>
        <br>
        <strong>Venue</strong> School of Rock</p>
    </div>
  </div>

  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Schedule for 2019</strong></p>
      <ul>
        <li>July – August
          <br>
          <em>22 Jul – 16 Aug 2019</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=22 Jul - 16 Aug 2019">Apply Now</a></li>
      </ul>
      <p><strong>Schedule for 2020</strong></p>
      <ul>
        <li>July – September
          <br>
          <em>20 Jul – 14 Sep 2020</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=20 Jul - 14 Aug 2020">Apply Now</a></li>
      </ul>

    </div>
  </div>
</div>

<div class="vc_tta-panel-body">
  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Programme</strong>&nbsp;<span class="TheProgramme">Blues</span>
        <br>
        <strong>Venue</strong> School of Rock</p>
    </div>
  </div>

  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Schedule for 2019</strong></p>
      <ul>
        <li>July – August
          <br>
          <em>1 Jul – 10 Aug 2019</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=22 Jul - 16 Aug 2019">Apply Now</a></li>
      </ul>
      <p><strong>Schedule for 2020</strong></p>
      <ul>
        <li>July – September
          <br>
          <em>8 Jul – 14 September 2020</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=20 Jul - 14 Aug 2020">Apply Now</a></li>
      </ul>

    </div>
  </div>
</div>

我已经成功获取URL参数中的日期。我如何获得该程序？我应该使用什么jQuery选择器？甚至有可能吗？

Answer 1

使用$(this).closest(".vc_tta-panel-body").find(".TheProgramme").text()

$(this).closest(".vc_tta-panel-body")进入包含链接和程序的DIV。然后.find(".TheProgramme")在DIV中搜索程序。

$('a.ApplyNowDate').attr('href', function() {
  return 'http://schoolofofrock.com/?programme=' + $(this).closest(".vc_tta-panel-body").find(".TheProgramme").text() + '&date=' + $(this).prev().text() + '/';
})

.ApplyNowDate,
.ApplyNowDate:hover {
  background: #e91e63;
  color: #fff;
  display: inline-block;
  font-size: smaller;
  padding: 5px 10px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vc_tta-panel-body">
  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Programme</strong>&nbsp;<span class="TheProgramme">Reggae</span>
        <br>
        <strong>Venue</strong> School of Rock</p>
    </div>
  </div>

  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Schedule for 2019</strong></p>
      <ul>
        <li>July – August
          <br>
          <em>22 Jul – 16 Aug 2019</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=22 Jul - 16 Aug 2019">Apply Now</a></li>
      </ul>
      <p><strong>Schedule for 2020</strong></p>
      <ul>
        <li>July – September
          <br>
          <em>20 Jul – 14 Sep 2020</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=20 Jul - 14 Aug 2020">Apply Now</a></li>
      </ul>

    </div>
  </div>
</div>

<div class="vc_tta-panel-body">
  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Programme</strong>&nbsp;<span class="TheProgramme">Blues</span>
        <br>
        <strong>Venue</strong> School of Rock</p>
    </div>
  </div>

  <div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
      <p><strong>Schedule for 2019</strong></p>
      <ul>
        <li>July – August
          <br>
          <em>1 Jul – 10 Aug 2019</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=22 Jul - 16 Aug 2019">Apply Now</a></li>
      </ul>
      <p><strong>Schedule for 2020</strong></p>
      <ul>
        <li>July – September
          <br>
          <em>8 Jul – 14 September 2020</em> <a class="ApplyNowDate" href="http://schoolofofrock.com/?programme=Reggae&amp;date=20 Jul - 14 Aug 2020">Apply Now</a></li>
      </ul>

    </div>
  </div>
</div>

根据选择器文本在href中更改参数值

1 个答案: