Variable get different result inside and outside of object

Question

I have one question. I am doing automatic slider with option to click on dot, which picture I want to show.

But I have problem with variable, which should find SVG and then I use this variable as a value for an array.

PROBLEM IS:

If I define this variable "dot" INSIDE of my object "Slider", it finds all SVG in div element.
But if I declare this variable "dot" OUTSIDE of my object, I will find elements instead of SVG.

Problematic part is:

dot = $('.images-switch').children(), - give different results if INSIDE or OUTSIDE of object SLIDER

Can you advise me how to solve it. And give my your opinion about my solution of slider?

Code is below (var dot is defined inside Slider object = find alls SVG):

var covers = $('.fadecovers'),
    cover = $('.cover'),
    imagesSwitch = $('.images-switch')
    i = 0,
    slideCount = $('.cover').length,
    slide = $('.cover'),
    slideArr = jQuery.makeArray(slide),
    dot = $('.images-switch').children(),
    dotArr = jQuery.makeArray(dot),
    n = 0;
 console.log(dot);

for (n = 0; n < (slideCount); n++) {
    $(dotArr[n]).attr('data', n);
};

$('.images-switch').children().first().addClass('active');

//Zaciatok objektu
var Slider = {
    // nastavenie atributov objektu Slider defaultne ako null
    intervalID: null,
    running: false,

    start: function() {

        intervalID  = setInterval (function () {

            var dot = $('.images-switch').children(),
                dotArr = jQuery.makeArray(dot);

            if (i == slideCount) {i = 0};

            if (cover.eq(0).is(':visible')) {i = 1};

                $(slideArr).fadeOut(700);
                $(slideArr[i]).fadeIn(700);
                $(dotArr).removeClass('active');
                $(dotArr[i]).addClass('active')
                i++;

            running = true;

        },3500);
    },

    pause: function() {
        //stopne vykonavanie setInterval funkcie
        clearInterval(intervalID);
        intervalID = null;
        running = false;
    },

    resume: function() {
        //ak nie je interval prazdny (teda ako keby neexistuje), tak spusti vykonavanie setInterval funkcie
        if (!intervalID) {this.start()};
    },
    //zlucenie funckii na stopnutie a znovu spustenie setInterval
    toggle: function() {
        if (running) this.pause();
        else this.resume();
    },
};

Slider.start();
covers.on('click', function() {
    Slider.toggle();
});

imagesSwitch.on('click', 'svg', function() {
    var dot = $('.images-switch').children(),
        dotArr = jQuery.makeArray(dot),
        data = $(this).attr('data');
    i = data;
    $(slideArr).fadeOut(700);
    $(slideArr[i]).fadeIn(700);
    $(dotArr).removeClass('active');
    $(dotArr[i]).addClass('active')
    i++;
});

Here is belonging HTML code:

<header class="article-header">
  <div class="container">
    <h1 class="post-title">
     Naše portfólio prác
    </h1>
  </div>
  <div class="fadecovers">
    <div class="cover"><img src="img/dragon-1.jpg"></div>
    <div class="cover fade-out" ><img src="img/dragon-2.jpg"></div>
    <div class="cover fade-out"><img src="img/dragon-3.jpg"></div>
    <div class="cover fade-out" ><img src="img/dragon-4.jpg"></div>
  </div>
  <div class="images-switch">
    <i class="fas fa-circle"></i>
    <i class="fas fa-circle"></i>
    <i class="fas fa-circle"></i>
    <i class="fas fa-circle"></i>
  </div>
</header>

Can you post also the minimal HTML (and CSS if relevant to the problem) so we can try it. Preferably post a minimal working example as a snippet which shows the problem. — A Haworth, Dec 12 '20 at 17:38
Put your code in a fiddle like this one http://jsfiddle.net/etfgy1kx/ and/or read this https://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect — react_or_angluar, Dec 12 '20 at 18:11
@user2623507, css is missing in above code. Please create minimal working example of your code and also mention what exactly is the problem you are facing. — Nikhil Patil, Dec 12 '20 at 18:12
I put it here https://codepen.io/tamtam123456/pen/abNEzBE?editors=0010 — Dump, Dec 12 '20 at 18:13
It is unclear what exactly your question is: you mention SVG but in the entire example there is no SVG element present. You also mention the output of the function is `Object { 0: i.fas.fa-circle, 1: i.fas.fa-circle, 2: i.fas.fa-circle, 3: i.fas.fa-circle, length: 4, prevObject: {…} }` twice, which contradicts the title of the question (they should be different each time according to your problem). As stated before, please reduce your problem (and code) to the absolute minimum and describe your preferred outcome accordingly. — soimon, Jan 09 '21 at 17:20

score 0 · Answer 1 · edited Feb 07 '21 at 21:09

0

I finally solved it by myself. I changed the circles made by SVG to SPAN (circle made by CSS). Now it works.

edited Feb 07 '21 at 21:09

DuDa

3,718
4
16
36

answered Feb 07 '21 at 18:57

Dump

237
1
12

Variable get different result inside and outside of object

1 Answers1