Question

首先，我对Javascript很新，而且我正在研究wordpress插件，所以如果这看起来有点模糊，那么这是一个巨大的道歉......（我对HTML / CSS有很好的了解，所以我到了那里！）

我需要在“tribe-event-date-start”中显示文本“Starting”以显示日期仅类“tribe-event-date-end”存在。< / p>

例如：

<span class="tribe-event-date-start">3 June - 9:00 pm</span> - <span class="tribe-event-date-end">6 June - 9:00 pm</span>

我已经通过编辑这样的CSS来完成这个：

.tribe-event-date-start:before {
    content: "Starting ";
}

...但是这会将文字放在所有日期之前，这是不理想的......

这是我可以用javascript做的事情吗？

Answer 1

如果课程退出与否，我会对这两种情况进行编码，我希望它能解决您的问题。

＆＃13;

    if($('.tribe-event-date-end').length > 0){
      $('.tribe-event-date-start').addClass('start');
    }

if($('.tribe-event-date-end2').length > 0){
      $('.tribe-event-date-start2').addClass('start');
    }

＆＃13;

.tribe-event-date-start.start:before,
.tribe-event-date-start2.start:before {
        content: "Starting ";
    }
    
    .wrap {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;
    }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="wrap">
    <label>If <strong>tribe-event-date-end</strong> class exists.</label></br>
    <span class="tribe-event-date-start">3 June - 9:00 pm</span> - <span class="tribe-event-date-end">6 June - 9:00 pm</span>
    </div>
    
    <div class="wrap">
    <label>If <strong>tribe-event-date-end2</strong> class not exists.</label></br>
    <span class="tribe-event-date-start2">3 June - 9:00 pm</span>
    </div>

＆＃13;

Answer 2

// select element with class 'tribe-event-date-end' immediately preceded by an element with class 'tribe-event-date-start'
$('.tribe-event-date-start+.tribe-event-date-end')
    // traverse to the left sibling of the matched element with class 'tribe-event-date-start'
    .prev('.tribe-event-date-start')
    // add a class to the sibling element that triggers the css selector below
    .addClass('show-starting');

.tribe-event-date-start.show-starting:before {
    content: "Starting ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<strong>With tribe-event-date-end sibling - will have "Starting" prepended</strong><br>
<span class="tribe-event-date-start">3 June - 9:00 pm</span> - <span class="tribe-event-date-end">6 June - 9:00 pm</span><br>
<br>
<strong>Without tribe-event-date-end sibling - won't have "Starting" prepended</strong><br>
<span class="tribe-event-date-start">3 June - 9:00 pm</span>

如果div存在，如何插入文本？

2 个答案: