Question

这是基于我之前的问题：How can I get this code to continuously loop through the items?

现在我希望每个幻灯片都有相应的数字，并让它们可以点击，这样你就可以转到那张幻灯片了。

这是我尝试过的关于我的jsfiddle的链接：http://jsfiddle.net/allisonc/xu9ym/

HTML：

<div id="design-tips">
    <div id="design-tips-title">Design tips</div>
    <div id="design-tips-content"></div>
    <div id="design-tips-controls"></div>
</div>

使用Javascript：

xmlstr = "<photo><item>To add a photo to your project,drag the photo from the list to the opening.</item><item>You can position your photo in the opening by dragging...</item><item>...and you can also edit the photo by double-clicking on it!</item></photo>"

xml = $.parseXML(xmlstr)
var items = 0;
var control = '';

var tips = $('item', xml).get().map(function(item){
    items++;
    if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
    else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
    return $(item).text();
});
console.log(tips);
$('#design-tips-controls').html(control);  
var currentIndex = 0;

function looper() {
    if(currentIndex>=tips.length) {
        currentIndex = 0;
    }
    $('#design-tips-content').html(tips[currentIndex])   
    currentIndex++;
}
looper();
setInterval(looper, 5000);

$('#design-tips-controls a').on('click', function()
{
    $('#design-tips-content').html(tips[$(this).attr('rel')]);   
});

Answer 1

Watta混乱！我建议你以这种方式给你的div一个class属性：

<div id="design-tips">
    <div id="design-tips-title" class="slide">Design tips</div>
    <div id="design-tips-content" class="slide"></div>
    <div id="design-tips-controls" class="slide"></div>
</div>

通过这种方式你可以：

$('.slide').on('click', foo);

var foo = function() {
  console.log("how I am", $(this));
  /* your code */
}

添加可点击的号码：

$('.slide').each(function (i) {
    $(this).click(function () {
       /* add here your href linked to i-number */
    });
});

如何在幻灯片中添加可点击的数字？

1 个答案: