Question

我有一些脚本说如果单词与“ Remote”匹配，请使其颜色为绿色。

$('ul li:last-child:contains("Remote")').css('color', '#40b771');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jobcontent">
  <h4>{{ job.title}}</h4>
  <ul class="namelist">
    {% if job.company.count() %}
    <li>{{ job.company.one().title }}</li>{% endif %} {% if job.location %}
    <li>{{ job.location }}</li>{% endif %}
  </ul>
</div>

现在，如果您查看https://www.perkk.co/，将会看到它使它们变为绿色，但是如果您应用了一个过滤器，该过滤器将显示“ Remote”帖子，则绿色消失。因此，加载结果后，我需要以某种方式再次调用JS。

Answer 1

这可能是这样做的一种方式。通过创建一个函数并在div更改时触发它。您还可以在过滤器按钮单击中添加着色功能。

const colorizeRemotes = () => $('ul li:last-child:contains("Remote")').css('color', '#40b771');
colorizeRemotes();
$('.job-container-12').bind("DOMSubtreeModified", colorizeRemotes);

$('#tst').on('click', () => {
$('.job-container-12').html(`
<div class="jobcontent">
  <h4>job 1</h4>
  <ul class="namelist">
    <li>test title</li>
    <li>Remote</li>
  </ul>
</div>`)});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="job-container-12">
<div class="jobcontent">
  <h4>job 1</h4>
  <ul class="namelist">
    <li>job 1</li>
    <li>Remote</li>
  </ul>
</div>
<div class="jobcontent">
  <h4>job 2</h4>
  <ul class="namelist">
    <li>test title</li>
    <li>wow</li>
  </ul>
</div>
</div>
<button id="tst">edit</button>

加载其他div元素时，如何重新加载JS？

1 个答案: