[英]Change Dynamic Link Text In Javascript
I currently have a slideshow run with HTMl CSS and JS at the moment for the navigation buttons below the slideshow it is just placing numbers instead of text. 目前,我正在使用HTMl CSS和JS进行幻灯片演示,幻灯片下面的导航按钮只是放置数字而不是文本。 Is there a way to grab the images title and use it or custom text for each slide link. 有没有一种方法可以获取图像标题并为每个幻灯片链接使用它或自定义文本。 Below i included the Javascript that makes the navigation buttons and adds the text. 在下面,我包含了使导航按钮并添加文本的Javascript。 If you need anything else just let me know. 如果您还有其他需要,请告诉我。
If i can just specify text in this JS file that would work too. 如果我可以在此JS文件中指定文本,那也可以。
Also if it may help im using Kickstart HTML Template. 另外,如果它可以帮助我使用Kickstart HTML模板。 Link to view it http://bliskdesigns.com/clients/timbr/ 链接以查看它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>');
});
It's difficult to give you a concise answer with what you've provided, however: 但是,很难用您提供的内容给您一个简洁的答案:
Assuming that in the code you've provided: 假设在您提供的代码中:
items
is an array containing each slide in your slideshow; items
是一个数组,其中包含幻灯片放映中的每张幻灯片; items
contains an img
; items
中的每个元素都包含一个img
; title
attribute of each img
; 您要在幻灯片导航中显示的文本是每个img
的title
属性; wrap
is the navigation; 由wrap
构建的无序列表就是导航; anchor
of each item injected into wrap
. 要更改的文本是注入到wrap
的每个项目的anchor
内的数字。 Here's a potential answer: 这是一个可能的答案:
// 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>');
});
This should just be a direct replacement for wherever in your project the code you've included above came from. 只要您上面包含的代码来自项目中的任何地方,这都应该是直接替代。
As I say: I can't promise that this will work without a lot more information, but in theory it will. 就像我说的那样:我不能保证没有更多的信息就能奏效,但从理论上讲是可以的。 Make sure that each of your images has a title: 确保每个图像都有标题:
<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >
Alternatively, you can use the text in the image's alt
tag instead by changing this line from above: 或者,您可以使用图像的alt
标签中的文本,而不是从上方更改此行:
// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');
In the list items you can add the text that you want to display instead of numbers, as shown below. 在列表项中,您可以添加要显示的文本而不是数字,如下所示。
<li data-displayText="Timber Mart"><a href="http://www.timbermart.ca/credit-card"> <img src="http://i.imgur.com/4XKIENA.png" width="920" /> </a></li>
Then in above code you can use the text instead of index, as shown below. 然后,在上面的代码中,您可以使用文本而不是索引,如下所示。
wrap.find('.slideshow-buttons')
.append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+$(items[index]).attr("data-displayText")+'</a></li>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.