CODEWITHSUNDEEP
jquery
Cristiano Matos
Cristiano Matos

Reputation: 329

Create function to flip text position

need to create a function when the container calls the number "1, 2, 3, 4" flip the position of the text. If the text is on the left goes right, if you are on the right goes left.

<div class="container container1">
    <p>box1</p>
</div>
<div class="container container2">
    <p>box2</p>
</div>
<div class="container container3">
    <p>box3</p>
</div>
<div class="container container4">
    <p>box4</p>
</div>

Jquery

function invert(container){
    var container = $('.container');   
    $('container').css('text-align','right');
}

invert(2); //2 is the corresponding number of the section to flip the text ".container 2"

jsfiddle

Upvotes: 0

Views: 50

Answers (3)

Suraz
Suraz

Reputation: 1269

You can compare the css property of alignment. Here a link 

function invert(container) {
     var dom  = $('.container'+container);
     if (dom.css('text-align') == 'right') {
         dom.css('text-align', 'left');
     } else {
         dom.css('text-align', 'right');
     }
}
invert(4);

http://jsfiddle.net/17byruh1/3/

Upvotes: 0

Yooz
Yooz

Reputation: 2518

I think there is a confusion in you code, you try to apply the CSS change to a string called container.

Can you check that and see if it's what you want :

http://jsfiddle.net/17byruh1/1/

function invert(container){
    var dom = $('.container'+container);   
    $(dom).css('text-align','left');
}

invert(2);

Upvotes: 0

Barmar
Barmar

Reputation: 782148

You need to use the container parameter to select the desired element

function invert(container) {
    var element = $('.container').eq(container-1); // Subtract 1 because `.eq()` is zero-based
    if (element.css('text-align') == 'right') {
        element.css('text-align', 'left');
    } else {
        element.css('text-align', 'right');
    }
}

Upvotes: 1

Related Questions