Reputation: 7952

jquery changing one css attribute of one specific html element

I have looked but have not found a specific answer for changing just one attribute. Here is an example I cooked: I only want to change the display attribute.

<html>
    <head>
        <title>
            test
        </title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            a.move {
                height: 25px;
                width: 25px;
                display: inline-block;
                border: 1px #aaa solid;
                border-radius: 5px;
                text-align: center;
                text-decoration:  none;
                color: black;
            }
            a.move:hover {
                background-color: #aaa;
            }

---v This is the important css part

            li {
                display: inline-block;
                width: 370px;
                border: 1px #aaa solid;
            }

---v This is the important css part

        </style>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            var current = 1;
            var wait = 0;
            function next(){
                current++;
                update();
            }
            function prev(){
                current--;
                update();
            }

---v This is the important jquery part

            function update(){
                $('p').text(current);
                $('li').each(function(index) {
                    if(index != current)
                        $(this).css('display','none');
                    else
                        $(this).css('display','inline');

                });
            }

end of the important part ---^

            $(function(){
                update();
                $('a.move.left').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    prev();
                });
                $('a.move.right').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    next();
                });
            });
        </script>
    </head>
    <body>
        <p> ... </p>
        <a class="move left" href="a">&lt;</a>&emsp;<a class="move right" href="b">&gt;</a></br>
        <ul>
            <li>123</li><!--
            --><li>123</li><!--
            --><li>456</li><!--
            --><li>789</li><!--
            --><li>abc</li><!--

            --><li>edf</li><!--
            --><li>ghj</li><!--
            --><li>!@#</li><!--
            --><li>$%^</li><!--
            --><li>ABC</li>
        </ul>
    </body>
</html>

Please advise. Currently, what happens is that it removes all the other css attributes. I could set all the attributes every time but I do not wish to.

Thanks

Upvotes: 2

Answers (4)

Asif

Reputation: 2677

Use

$(this).toggle()

or If you want to show or hide use show and hide as you required.

$(this).show() 
$(this).hide()

Upvotes: 1

Christoph

Reputation: 51211

Modifying the css directly is (in most cases) not a good option.

instead either use:

$(this).show() and $(this).hide()

or (my personal preference, since this is even more flexible):

$(this).toggleClass("...") and create according CSS-classes in your stylesheet.

Additionaly, you are changing the css of ALL you liitems: $('li').each - is this really what you want?

The .css() method only changes the css-attribute you specify - it does not override other styles. If this seems to be the case, the problem probably lies somewhere else in your code.

Upvotes: 2