JQuery html() .replaceWith() need assistance with refactoring

Question

I am very new to JQuery and am not familiar with all its methods. How would you refactor showNextTip() method (it looks very ugly to me)

    <div id="dialog-tip" title="Did You Know?">
        <p>I am tip 1</p>
        <img src="Images/Tips/tip1.png" alt="Tip!" />     
    </div>

function showNextTip() {
    var tip1_title = "I am tip 1";
    var tip1_p = "<p>" + tip1_title + "</p>";
    var tip1_img = "<img src='Images/Tips/tip1.png' alt='Tip!' />";

    var tip2_title = "I am tip ";
    var tip2_p = "<p>" + tip2_title + "</p>";
    var tip2_img = "<img src='Images/Tips/tip2.png' alt='Tip!' />";

    var tip3_title = "I am tip 3";
    var tip3_p = "<p>" + tip3_title + "</p>";
    var tip3_img = "<img src='Images/Tips/tip3.png' alt='Tip!' />";

    if ($("#dialog-tip p").html() == tip1_title) {
        $("#dialog-tip p").replaceWith(tip2_p);
        $("#dialog-tip img").replaceWith(tip2_img);
    } else if ($("#dialog-tip p").html() == tip2_title) {
        $("#dialog-tip p").replaceWith(tip3_p);
        $("#dialog-tip img").replaceWith(tip3_img);
    } else if ($("#dialog-tip p").html() == tip3_title) {
        $("#dialog-tip p").replaceWith(tip1_p);
        $("#dialog-tip img").replaceWith(tip1_img);
    }
}

EDIT: I might have different strings for Title and Image. in c# i would of create a class named Tips with 2 properties: title and image. how can i do so with JQuery?

Answer 1

<div id="dialog-tip" title="Did You Know?">
    <p class="tip-text">I am tip 1</p>
    <img class="tip-image" src="/images/tips/tip1.png" alt="">
</div>

(function() {
    var tips = ['I am tip 1', 'I am tip 2', 'I am tip 3'],
        tipIndex = 0;

    window.showNextTip = function() {
        tipIndex = (tipIndex + 1) % tips.length;
        $('#dialog-tip .tip-text').text(tips[tipIndex]);
        $('#dialog-tip .tip-image').prop('src', '/images/tips/tip' + (tipIndex+1) + '.png');
    };
})();

• Avoid duplication.
• Avoid pollution of the global name space.
• Reference elements by classes rather than tag names to improve maintainability.
• Always escape HTML to avoid XSS and hidden bugs.
• Minimize DOM touches, because they can be expensive.

Answer 2

var tips = {
    1: "I am tip 1",
    2: "I am tip 2",
    3: "I am tip 3",
}; 

var addressOfIMG = {
    1: "I am add 1.png",
    2: "I am add 2.bmp",
    3: "I am add 3.jpg",
}; 

$.fn.NewIndex = function(oldIndex) {
    (oldIndex == 1) ? return 2 : (oldIndex == 2) ? return 3 : return 1;
}    

currentIndex = 1;           //global var that will keep track of the tip index

$.fn.showNextTip = function () {    

    var base_address = "Images/Tips/tip";
    var dialogTip = $("#dialog-tip p").innerHTML;

    var newIndex = NewIndex(currentIndex);

    $("#dialog-tip p").innerHTML = tips[newIndex];
    $("#dialog-tip img").attr(addressOfIMG[newIndex]);

    currentIndex = newIndex;
}

Next, just simple run your code, in ready or whichever event you like, as:

$.(document).ready(function() {    //this could be any other event besides ready()
    $.fn.showNextTip();
}

Answer 3

For all <div id="dialog-tip" class="dialog-tip" title="Did You Know?">

Give it a common class Name.. Then Try this

var tip_title = "I am tip " ;

var tip_p = [];
var tip_img = [];

var dialogTips = $('.dialog-tip');

$.each(dialogTips , function(i) { 

     tip_p[i] = title_tip +  i+1;
     tip_img[i] = "<img src='Images/Tips/tip" +  i+1 + ".png' alt='Tip!' />";

});

$.each(dialogTips , function(i) { 
    if( i == dialogTips .length){
        $(this).find('p').remove().append( tip_p[0] );
        $(this).find('img').remove().append( tip_img[0] );
    }
    else if( i < dialogTips .length){
        $(this).find('p').remove().append( tip_p[i++] );
        $(this).find('img').remove().append( tip_img[i++] );
    }
});

DEMO

This should work for any number of dialogTips in your code..