Add individual text replacing each number for JavaScript menu-CodePudding

I want to replace the numbers in the HTML menu li link class"scrollTo" (created by JavaScript) to individual text rather than the 01, 02, 03, 04 numbers

function createSliderPagination(container){
      var wrapper = $('<ol ></ol>');
      container.children('.slot-slider').find('li').each(function(index){
        var dotWrapper = (index == 0) ? $('<li ></li>') : $('<li></li>'),
            dot = $('<a href="#0"></a>').appendTo(dotWrapper);
        dotWrapper.appendTo(wrapper);
        var dotText = (index 1 < 10) ? '0'   (index 1): index 1;
        dot.text(dotText);
      });
    wrapper.appendTo(container);
    return wrapper.children('li');
  }

Html code created is this that the JavaScript is creating

<ol >
<li><a href="#0" >01</a></li>
<li ><a href="#0" >02</a></li>
<li><a href="#0" >03</a></li>
<li><a href="#0" >04</a></li>
<li><a href="#0" >05</a></li>
</ol>

CodePudding user response：

You can add an array which contains the texts you want to use instead of the numbers , as an example :

function createSliderPagination(container){
  const links = ['first title','second title','third title','fourth title','fifth title'] // An array that contain the texts you want to use
  var wrapper = $('<ol ></ol>');
  container.children('.slot-slider').find('li').each(function(index){
    var dotWrapper = (index == 0) ? $('<li ></li>') : $('<li></li>'),
        dot = $('<a href="#0"></a>').appendTo(dotWrapper);
    dotWrapper.appendTo(wrapper);
    var dotText = links[index]
    dot.text(dotText);
  });
wrapper.appendTo(container);
return wrapper.children('li');

}

CodePudding user response：

You could use a switch statement to evaluate index :

function createSliderPagination(container) {
    var wrapper = $('<ol ></ol>');
    container.children('.slot-slider').find('li').each(function(index) {
        var dotWrapper = (index == 0) ? $('<li ></li>') : $('<li></li>'),
            dot = $('<a href="#0"></a>').appendTo(dotWrapper);
        dotWrapper.appendTo(wrapper);
        var dotText;
        switch(index) {
             case 0:
                 dotText = "Home";
                 break;
             case 1 :
                 dotText = "Our services";
                 break;
             case 2 :
                 dotText = "Third item";
                 break;
             case 3 :
                 dotText = "Fourth item";
                 break;
             default :
                 dotText = "Default";
                 break;
        }
        dot.text(dotText);
    });
    wrapper.appendTo(container);
    return wrapper.children('li');
}