0
私はページと2つのボタンにブロックを持っています。私は次のシナリオが欲しい：赤いブロックが既にページにあるので、 "Show red blocks"ボタンをクリックすると何も起こらない。 「緑色のブロックを表示」ボタンをクリックすると、緑色のブロック（大小）がページに表示されます（赤いブロックは消えます）。 "Show red blocks"ボタンをクリックすると、緑のブロックの代わりに赤いブロックが表示されます。jQueryをクリックしてコンテンツを変更する方法は？
コードが正しく動作せず、エラーが発生しています。私は問題が何かを管理することはできません。私はinnerHtmlについて読んだことがありますが、私の場合は役に立たないと思います。
$(document).ready(function() {
$('.btn-green').click(function showred() {
$('.block-green').toggleClass('show');
$('.block-red').toggleClass('hide');
});
$('.btn-green').click(function showgreen() {
$('.block-green-small').toggleClass('show');
$('.block-red-small').toggleClass('hide');
});
$('.btn-red').click(function() {
$('.block-green').toggleClass('hide');
$('.block-red').toggleClass('show');
});
$('.btn-red').click(function() {
$('.block-green-small').toggleClass('hide');
$('.block-red-small').toggleClass('show');
});
});.container-large {
max-width: 800px;
height: 200px;
margin: 10px auto 10px;
padding: 5px;
border: 1px solid #000;
}
.container-small {
max-width: 200px;
height: 200px;
margin: 10px auto 10px;
padding: 5px;
border: 1px solid #000;
}
p {
text-align: center;
}
.btn-red {
margin-bottom: 5px;
}
.btn {
width: 200px;
height: 30px;
border: 1px solid black;
border-radius: 7px;
font-family: sans-serif;
color: #fff;
text-align: center;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
.block-red {
width: 100%;
height: 200px;
background-color: red;
display: block;
}
.block-green {
width: 100%;
height: 200px;
background-color: green;
display: none;
}
.block-red-small {
height: 200px;
background-color: red;
display: block;
}
.block-green-small {
height: 200px;
background-color: green;
display: none;
}
.show {
display: block;
}
.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn btn-red" onclick="showgreen()">Show red blocks</div>
<div class="btn btn-green" onclick="showred()">Show green blocks</div>
<p>Large blocks:</p>
<div class="container-large">
<div class="block-red"></div>
<div class="block-green"></div>
</div>
<p>Small blocks:</p>
<div class="container-small">
<div class="block-red-small"></div>
<div class="block-green-small"></div>
</div>
スニペットを実行します。エラーは何が間違っているかを正確に教えてくれます。 – Turnip
Javascriptのスコープについて学ぶ必要があります。関数 'showRed'と' showGreen'を別の関数の中に定義しました。これにより、それらはローカルで利用できるようになりますが、グローバルには利用できなくなります。あなたの関数を '$（document）.ready（）' - ハンドラーの外に定義すると、それが動作します。 – connexo