CODEWITHSUNDEEP
javascriptjquery
Sony packman
Sony packman

Reputation: 840

Avoiding having to write the same word over and over again

I'm very new to javascript so this question might sound stupid. But what is the correct syntax of replacing certain words inside variables and functions. For example, I have this function:

function posTelegram(p){
var data = telegramData;
$("#hotspotTelegram").css("left", xposTelegram[p] +"px");
if (p < data[0] || p > data[1]) {
$("#hotspotTelegram").hide()
} else {
$("#hotspotTelegram").show()
}
};

There is the word "telegram" repeating a lot and every time I make a new hotspot I'm manually inserting the word to replace "telegram" in each line. What would be a smarter way of writing that code so that I only need to write "telegram" once?

Upvotes: 1

Views: 184

Answers (4)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382160

You can't always avoid this kind of repetition (this is general to all programing languages).

Sometimes, you can make generic functions or generic classes, for example a class which would embed all your data :

Thing = function(key, xpos) {
    this.$element = $('#hotspot'+key);
    this.xpos = xpos;
};

Thing.prototype.pos = function (p, data) {
    this.$element.css("left", this.xpos[p] +"px");
    if (p < this.data[0] || p > this.data[1]) {
        this.$element.hide()
    } else {
       this.$element.show()
    }
};

And we could imagine that this could be called like this :

var telegramThing = new Thing('telegram', xposTelegram);
...
telegramThing.pos(p, data);

But it's really hard to make a more concrete proposition without more information regarding your exact problem.

I recommend you read a little about OOP and javascript, as it may help you make complex programs more clear, simple, and easier to maintain. For example, using a Thing class here would enable

  • not defining more than once the "#hotspotTelegram" string in your code
  • reusing the logic and avoid making the same code with another thing than "telegram"
  • not having the Thing logic in your main application logic (usually in another Thing.js file)

But don't abstract too much, it would have the opposite effects. And if you don't use objects, try to keep meaningful variable names.

Upvotes: 1

Quentin
Quentin

Reputation: 943591

Group similar / related data in to data structures instead of having a variable for each bit.

Cache results of calling jQuery

Use an argument

function posGeneral(p, word){

  // Don't have a variable for each of these, make them properties of an object
  var data = generalDataThing[word].data; 

  // Don't search the DOM for the same thing over and over, use a variable
  var hotspot = $("#hotspot" + word);
  hotspot.css("left", generalDataThing[word].xpos[p] +"px");

  if (p < data[0] || p > data[1]) {
    hotspot.hide()
  } else {
    hotspot.show()
  }
};

Upvotes: 1

bart s
bart s

Reputation: 5100

you can create a selector as variable, something like this

function posTelegram(p){
  var data = telegramData;
  var $sel = $("#hotspotTelegram");

  $sel.css("left", xposTelegram[p] +"px");
  if (p < data[0] || p > data[1]) {
    $sel.hide()
  } else {
    $sel.show()
  }
};

Upvotes: 0

Thomas Hudspith-Tatham
Thomas Hudspith-Tatham

Reputation: 471

var t = "Telegram";
var $_tg = $('#hotspotTelegram');

$_tg.css("left", "xpos"+t[p] + "px"); // not sure about this line, lol
$_tg.hide();
$_tg.show();

etc.

Upvotes: 0

Related Questions