javascript - 在 Javascript 中更改动态链接文本

Question

我目前有一个使用 HTMl CSS 和 JS 运行的幻灯片，幻灯片下方的导航按钮只是放置数字而不是文本。有没有办法获取图像标题并使用它或为每个幻灯片链接使用自定义文本。下面我包含了制作导航按钮和添加文本的 Javascript。如果您还需要什么，请告诉我。

如果我可以在这个 JS 文件中指定文本也可以。

此外，如果它可以帮助我使用 Kickstart HTML 模板。 查看链接http://bliskdesigns.com/clients/timbr/

var items = $(this).find('li');
    wrap.append('<ul class="slideshow-buttons"></ul>');
    items.each(function(index){
        wrap.find('.slideshow-buttons')
        .append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+(index+2)+'</a></li>');
    });

Answer 1

但是，很难根据您提供的内容给您一个简明的答案:

假设在您提供的代码中:

• items 是包含幻灯片中每张幻灯片的数组；
• items 中的每个元素都包含一个 img；
• 您希望在幻灯片导航中显示的文本是每个 img 的 title 属性；
• wrap 构建的无序列表是导航；
• 您要更改的文本是注入(inject)到 wrap 中的每个元素的 anchor 中的数字。

这是一个可能的答案:

// put all slides into 'items'
var items = $(this).find('li');

// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');

// loop over each item
items.each(function(index){
    // grab the title attribute of the img child of this instance of items
    var titleText = $(this).find('img').attr('title');  

    // push a new <li> into 'wrap'
    wrap.find('.slideshow-buttons').append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+titleText+'</a></li>');
});

这应该只是您元素中您上面包含的代码的来源的直接替换。

正如我所说:我不能保证在没有更多信息的情况下这会起作用，但理论上它会起作用。确保你的每张图片都有一个标题:

<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >

或者，您可以使用图像的 alt 标记中的文本，而不是通过更改上面的这一行:

// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');