2

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

<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 属性。我每次都可以设置所有属性，但我不希望这样做。

谢谢

4

4 回答 4

2

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

而是使用：

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

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

$(this).toggleClass("...")并在您的样式表中创建相应的 CSS 类。

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

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

于 2012-06-19T08:53:09.573 回答
1

利用

$(this).toggle()

或者，如果您想显示或隐藏，请根据需要使用显示和隐藏。

$(this).show() 
$(this).hide()
于 2012-06-19T09:06:42.113 回答
0

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

$(this).show()或者$(this).hide()而不是改变css。

于 2012-06-19T08:52:54.100 回答
0

取而代之的是，为什么现在使用：

$(this).show() 或 $(this).hide() 根据需要... ot $(this).toggle() ....

于 2012-06-19T08:51:32.447 回答