Jquery 如何更改Twenty-Twenty插件中的前后标签？

如果您不熟悉该插件，它是一个视觉差异工具，允许您突出显示两个图像之间的差异

我在wordpress上使用他们的插件，因为我需要在两个图像之间滑动的功能。但是，当您将鼠标悬停在图像上时，默认情况下会显示“之前”和“之后”

---

基本上我想做的是改变前后的标签，这样他们就可以说些别的。如何执行此操作？

您可以通过修改文件twentytwenty.css中的以下行来更改这些参数：

.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "**Before**"; }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "**After**"; }

---

css的这一部分出现在第102行。要维护twentytwenty.css，请更改html，为每个div容器提供唯一的ID：

<div id="set_1" class="twentytwenty-container">    
    <img src="img/1_1.jpg" />
    <img src="img/1_2.jpg" />
</div>

---

这使您能够在需要时维护原始的前后文本，并在执行多个图像比较时提供唯一的标签。

通过插件选项设置标签：

$(".twentytwenty-container").twentytwenty({
    before_label: 'Before',
    after_label: 'After'
});

---

这个问题最好继续问下去。哦，打得好。我想我已经想明白了。谢谢。为什么有些开发人员要把这个标签放在CSS文件中？那么如何翻译这些呢？真的很糟糕。。。我已经解决了这个问题，用PHP在图像上添加了数据标题，用JS我设置了获取它们并创建了新的CSS样式，我必须将这些样式附加到头部，因为当然你不能用JavaScript更改伪元素。。。明亮的

$(".twentytwenty-container").twentytwenty({
    before_label: 'Before',
    after_label: 'After'
});