Is is possible to pass a selector as a function parameter in Javascript?

Question

I am trying to develop a kind of slideshow to an specifi application. I am having some problems with the incremetation of the div to be shown. I need to pass the selector with its position, and so increment its position.

Check the code of what I need to do:

HTML:

    <div name="div-default" class="title-result">
        <?php
            echo "$name";
        ?>
    </div>
    <div name="div01" id="div01" class="title-result">
        <?php
            echo "Seu número de Personalidade é: $numerologia[0]";
        ?>
    </div>
    <div name="div02" class="title-result">
        <?php
            echo "Seu número de Destino é: $numerologia[1]";
        ?>
    </div>
    <div name="div03" class="title-result">
        <?php
            echo "Seu número de Lição de Vida é: $numerologia[2]";
        ?>
    </div>

    <div>
        <button onclick="mudarDivNext([name ^= div0]:nth-child(SEND_ITS_POSITION_HERE))" id="next" class="change-div"></button>
     </div>

CSS:

 //here i define that the first div is visible, and the next ones invisible
    div[name ^= div0]:nth-child(2){
        display: inherit;
    }

    div[name ^= div0]{
        display: none;
    }

Javascript:

//This script already works for a fix position (from 2 for 3, for example) - need to make it work for all the divs.
function mudarDivNext(){
    var n = 2;
    $("[name ^= div0]:nth-child("+n+")").css("display", "none");
    $("[name ^= div0]:nth-child("+(n+1)+")").css("display", "inherit");
}

Yes I did.. It didn't work here. I can't figure out how to send the number of my div position ([name ^= div0]:nth-child(2);[name ^= div0]:nth-child(3); [name ^= div0]:nth-child(4))... — Anderson
– Anderson, Commented Apr 11, 2014 at 18:34

tymeJV · Accepted Answer · 2014-04-11 18:37:22Z

1

Couple of things, don't forget about the quotes when you are using inline function calls, and use string concatenation to send the parameter:

mudarDivNext("[name ^= div0]:nth-child(" + variable + ")")

answered Apr 11, 2014 at 18:37

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anderson Over a year ago

Thanks for your answer, but how can I define the value of a variable in my HTML code? :( I need to get the position of my div, which i coudn't do yet.

tymeJV Over a year ago

Hmm...position based on what? I also believe you should throw this into it's own handler for the button, that way you can use an instance of this to track down the div's index and use that.

Douglas.Sesar · Accepted Answer · 2014-04-11 18:55:23Z

0

How about you just add a class to the visible element and allow jQuery to choose the next element to get the class when you click:

<div name="div-default" class="title-result active">
        <?php
            echo "$name";
        ?>
    </div>



<script>
    jQuery(document).ready(function() { 
                (function ($) { 

            $('#next').on('click',function(){

                $('.active').removeClass('active').next().addClass('active');


            });

        })(jQuery);
    });
</script>

then add css to only show the div with the 'active' class.

<style>
.title-result{display:none;}
.title-result.active{display:block;/*or whatever*/}
</style>

edited Apr 11, 2014 at 18:55

answered Apr 11, 2014 at 18:45

Douglas.Sesar

4,4805 gold badges31 silver badges38 bronze badges

Collectives™ on Stack Overflow

Is is possible to pass a selector as a function parameter in Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related