0

条件に基づいて、ボタンと div の表示と非表示を切り替えたい。現在、JQuery hide は button() に対して機能していますが、show() は div に対しては機能していません。つまり、以下の JavaScript では、条件が満たされた場合、ボタンは非表示になりますが、div は表示されません。

html:

<button type="button" id="my-button" onclick="...do something">Go</button>
<div id="my-text">Please send an email to help@mycompany.com</div>

CSS:

#my-text{
    display: none;
}

JavaScript:

<script type="text/javascript">
    (function() {
        $(document).ready(function() {
            var someConditionIsMet = //...compute something
            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').show();
            }
        });
    })();
</script>

ただし、次のように変更すると

            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').attr("style", "display:block")
            }

その後、正常に動作します。show は基本的に表示スタイルをブロックに変更していると思っていたので、なぜこのように綴らなければならないのかわかりません。理由はありますか？

4

3 に答える 3

0

コードを少し単純化して、

$('#my-button, #my-text').toggle();

それは要素の可視性を切り替えますが、おそらく問題を解決することはできません。最初にdivを非表示にした方法に関連している可能性があります。css を手動で設定する代わりに、それを . hide() に変更してみてください。要素を非表示にする方法はいくつかあります。show はそのうちの 1 つだけを元に戻します (hide() にも同じ方法が使用されます)。

于 2012-10-24T19:10:34.973 に答える
0

showこのフィドルで私のために働きます。あなたの条件は確実に満たされていますか？alert('conditions met');の中にを投げてみて、ifトリガーされるかどうかを確認します。

于 2012-10-24T19:13:21.607 に答える
0

属性を割り当てることを検討aria-hiddenしてから、jQuery を使用して、スクリーン リーダーに対して非表示として指定したものをすべて非表示にします。

コード：

<button type="button" id="my-button" onclick="...do something" aria-hidden="true">Go</button>

JavaScript:

$('[aria-hidden="true"]').hide(); //hide anything that's marked as hidden to screen-readers

次に、.hide() と .show() を使用して、aria-hidden属性を切り替えます。

http://jsfiddle.net/jhfrench/4kNPF/ で実際の例を参照してください。

于 2012-10-24T19:17:31.763 に答える