JavaScript JavaScript - Objektmethoden werden überschrieben

njester

Cadet 2nd Year
Registriert
Aug. 2012
Beiträge
25
Hallo,

ich versuche gerade mit jQuery einen Slider zu bauen. Da er für mehrere Slider auf einer Seite funktioniern soll, lege ich im HTML eine CSS-Klasse mit der Slider Nummer an z.B. (slide-1). Beim erzeugen des Sliderobjeketes kann ich dann die Nummer übergeben.

Leider wird jedoch beim erzeugen des 2. Objekts das erste überschrieben, sprich ich steuere mit den Buttons des ersten Sliders den zweiten.

Über Hilfe wie man das Problem behen kann wäre ich sehr dankbar :)

Code:
var sliderWidget = {
	init: function( settings ){
		
		this.config = {
			sliderNumber: 0,
			hasBullets: false,	
			hasThumbnails: false				
		};
		
		$.extend( this.config, settings );
		
		this.initials = {
			$thumbnails: {},
			$pictures: {},
			$bntNext: {},
			$btnPrev: {},
			$bullets: {},
			total: 0,	
			currentIndex: 0
		};
		
		$.extend( this, this.initials );		
		
		sliderWidget.setup();
	},
	
	setup: function(){
		
		this.$pictures = $(".slide-"+this.config.sliderNumber);
		this.$btnNext = $(".slider-btn-next-"+this.config.sliderNumber);
		this.$btnPrev = $(".slider-btn-prev-"+this.config.sliderNumber);
		
		if(this.config.hasThumbnails){
			this.$thumbnails = $(".own-thumbnail-" + this.config.sliderNumber);
			
			this.$thumbnails.click($.proxy(function(event){
				this.config.currentIndex = $(event.currentTarget).index();
				this.cycleItems();
			},this));		
		}

		this.$btnNext.click($.proxy(function () {
			this.updateIndex(1);
			this.cycleItems();
		}, this));
	
		this.$btnPrev.click($.proxy(function () {
			this.updateIndex(-1);
			this.cycleItems();
		}, this));	
		
		this.total = this.$pictures.length;
		
		if(this.config.hasBullets){
			var $previewSlider = $(".preview-slider");
			$previewSlider.append("<ul class='bullets'>");
			for(var i = 0; i < this.total;i++){
				$previewSlider.append("<li class='bullet bullet-" + this.config.sliderNumber +"'</li>");	
			}	
			$previewSlider.append("</ul>");
			this.$bullets	= $(".bullet-" + this.config.sliderNumber);
		}		
	},
	
	updateIndex: function(increment){
		this.currentIndex += increment;
		if (this.currentIndex > this.total - 1) {
			this.currentIndex = 0;
		}else if(this.currentIndex < 0){
			this.currentIndex = this.total - 1;
		}
	},
	
	cycleItems: function() {
		var $picture = this.$pictures.eq(this.currentIndex);
		if(this.config.hasThumbnails){
			var $thumbnail = this.$thumbnails.eq(this.currentIndex);
			this.$thumbnails.removeClass("active");
			$thumbnail.addClass("active");
		}
		this.$pictures.removeClass("active");
		$picture.addClass("active");
	} 
}

So wird der slider aufgerufen:

Code:
 $(function() {
   
   var args = {
     hasThumbnails: true,
     sliderNumber: 1,
     hasBullets: true
   }
   
    var args2 = {
     hasThumbnails: false,
     sliderNumber: 2,
     hasBullets: false
   }
   
  sliderWidget.init(args);
  sliderWidget.init(args2);

});


PS: Er geht 2 mal in die init() und übergibt die passenden Werte und lädt auch die richtigen Objekte.
 
Zuletzt bearbeitet:
Solltest du das Objekt nicht mit Konstruktor aus einer Funktion erstellen? So wie du es jetzt machst ist es ja einfach nur eine Variable von der du 2x die Funktion init() aufrufst.

Code:
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

Siehe: http://www.w3schools.com/js/js_object_definition.asp
 
Hi,

danke für den Tipp. Das dachte ich mir schon, mir war nur nicht ganz klar wie ich das umstellen kann.
Aber nach weiteren einlesen in JavaScript habe ich das nun hinbekommen. Und dabei das ganze noch als jQuery funktion implementiert.

Falls es jemanden interessiert, so schaut das nun aus: https://jsfiddle.net/k1anrvpp/
 
Zurück
Oben