Question

我看过，但没有找到更改一个属性的具体答案。这是我做的一个例子：我只想更改显示属性。

<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这是重要的css部分

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

--- v这是重要的css部分

        </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这是重要的jquery部分

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

                });
            }

重要部分结束--- ^

            $(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>

请指教。目前，会发生的是它删除了所有其他css属性。我可以每次都设置所有属性，但我不希望这样做。

由于

Answer 1

直接修改css（在大多数情况下）不是一个好的选择。

而是使用：

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

或（我个人的偏好，因为这更灵活）：

$(this).toggleClass("...")并在样式表中根据CSS类创建。

另外，您正在更改所有li项目的{css：$('li').each - 这真的是您想要的吗？

.css()方法仅更改您指定的css属性 - 它不会覆盖其他样式。如果情况确实如此，问题可能就在您的代码中的其他地方。

Answer 2

使用

$(this).toggle()

或者如果您想要显示或隐藏使用show和hide，请按照您的要求。

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

Answer 3

而不是那样，为什么现在使用：

$（this）.show（）或$（this）.hide（）根据需要... ot $（this）.toggle（）....

Answer 4

在jquery中，您可以使用以下方式隐藏或显示元素：

$(this).show()或$(this).hide()而非更改css。

jquery更改一个特定html元素的一个css属性

4 个答案: