Question

我的日历中有一个事件列表（由CMS生成），其中一些事件的状态为“即将推出”，而不是在线注册链接。我打算将“即将推出”文本更改为mailto链接，并获取事件标题并将其附加到mailto Url中，例如mailto：info@domain.com？Subject =“ event-title-here”。这样，收件人将知道与哪个电子邮件有关的事件。

这是我的HTML：

<ul class="events">          
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 1</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><a href="#">Register Now</a></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 2</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><span>Coming Soon</span></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 3</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><a href="#">Register Now</a></span>
        </div>              
    </li>
    <li>
        <div class="day-month">
            <span class="day">12</span>
            <span class="month">Dec</span>
        </div>
        <div class="info">
            <a class="event-title" data-sf-field="Title" data-sf-ftype="ShortText" href="#">Event Title 4</a>
            <span class="city-state"><i class="fas fa-map-marker-alt"></i>Foster City, CA</span>
            <span class="registration"><span>Coming Soon</span></span>
        </div>              
    </li>
</ul>

我在跨度中添加了一个类别，该类别将包裹即将来临的文本，我认为这是我可以遍历这些事件的方式：

(function ($) {
    $('.registration span:contains("Coming Soon")').addClass('email-updates');

    $('.email-updates').each(function() {
        var eventTitles = $(this).closest('.event-title').text();
        $('.registration span:contains("Coming Soon")').html('<a href="mailto:info@domain.com?Subject=' + eventTitles + '>Sign up for email updates</a>');
    });

}(jQuery));

但这对我不起作用。在此示例中，如何获取事件标题2 和事件标题4 ，并将它们附加到每个mailto href中的 Subject = 之后的链接中？

Answer 1

尝试使用以下代码：

(function ($) {
 $(document).find('.registration span:contains("Coming Soon")').addClass('email-updates');
  setTimeout(function(){
      $(document).find('.email-updates').each(function() {
          var eventTitles = $(this).closest('.event-title').text();
          $(this).html('<a href="mailto:info@domain.com?Subject=' + eventTitles + '">Sign up for email updates</a>');//You missed the closing double quotes here 
       });
  },500);

}(jQuery));

当我们向DOM中动态添加元素或类时，我们将无法访问它们。我们需要通过$（document）访问它们。

jQuery each（）遍历列表项并分别为每个项做一些事情

1 个答案: