javascript - 用 flexslider.js 中的图像替换字符串

Question

所以我一直在尝试使用@font-face 来尝试设置这个网站的方向箭头的样式，但没有任何运气。我所有其他的@font-face 一直在工作，但这个不会。所以我需要在页面上添加粉色箭头；所以我可以改用图像。我想我找到了代码在哪里；但是我的 Javascript 知识非常少。如果我发布了错误的代码，我很抱歉，但就是这样。我需要做的是找出如何用链接到箭头图像的图像替换“（”。提前致谢。

directionNav:!0,prevText:"(",nextText:")"

Answer 1

快速浏览一下，这些元素的 CSS 选择器上没有左/右消歧器，这使得用于放置图像元素的简单 jQuery 代码更加复杂。您仍然可以找到相关 DOM 节点的列表，然后假设第一个在左，第二个在右，并附加图像子节点。

但更简单的是，作为可接受的东西的第一个近似值，您可以简单地使用‹（用于角度引号）或←（用于实际箭头）吗？也许这就是你开始的地方。

我们可以从

jQuery(".flex-direction-nav").length;

您的导航周围有一个带有 CSS 类的元素，类似地

jQuery(".flex-direction-nav li").length;

表明只有这两个li元素，就像我上面所说的那样。因此，您可以使用以下几行手动交换图像

jQuery(jQuery(".flex-direction-nav li a")[0]).text("").append("<img src='path/to/left.png' alt='left'>");
jQuery(jQuery(".flex-direction-nav li a")[1]).text("").append("<img src='path/to/right.png' alt='right'>");

它清除了括号并将合适的图像附加到包含在li导航容器子元素中的链接标记中。其中一个jQuery包装器可能不是必需的，但它不应该伤害任何东西。

您应该能够将这些行放在发生页面加载初始化代码的任何地方。如果您还没有任何初始化代码，则可以直接将函数传递给jQuery：

jQuery(function() { console.log("This is called when the page is ready."); });

我不是 100% 我在回答你问的问题，但我希望这会有所帮助。