2

私は調べましたが、1つの属性だけを変更するための具体的な答えは見つかりませんでした。これが私が作った例です：私はdisplay属性だけを変更したいです。

<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

その代わりに、なぜ今使用するのですか？

必要に応じて$（this）.show（）または$（this）.hide（）... ot $（this）.toggle（）...。

于 2012-06-19T08:51:32.447 に答える
0

jqueryでは、以下を使用して要素を非表示または表示できます。

$(this).show()または$(this).hide()cssを変更する代わりに。

于 2012-06-19T08:52:54.100 に答える