Jquery クリックで画像の切り替えと表示内容の非表示を実現 (実現する2つの方法)_jquery

コンピューターの画面サイズは固定されていますが、限られたスペースにより多くのコンテンツを配置するにはどうすればよいでしょうか?
特定のコンテンツを見たいときはすぐに見ることができ、見たくないときは非表示にすることができる、十分な選択肢をユーザーに提供する必要があります。そこで、タイトルにあるような疑問が生じます。

実際、この質問は非常に単純です。そこで、私がこれを共有する理由は、一方では私たち全員が互いにコミュニケーションを図るためであり、他方ではそれは次のことの要約でもあるからです。私たち自身の学び。

ここで私が考えた 2 つの方法を皆さんと共有します。
これで十分ですので、以下のコードを見てみましょう:

最初は従来のメソッド :
[javascript]

コードをコピー コードは次のとおりです:

$(function(){
var image = ['images/up.png' , 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$ (img ).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[ 0] );
$(img).addClass("up");
})

$(function(){
var image = ['images/up.png', 'images/down.png']
$(img).onClick(function( ){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]); img) .removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up"); >}
});
})



これは主に画像コントロール クリックイベントに、クリック時のCSSコントロール（主にコンテンツの特定部分を表示するかどうかをCSSで設定）を追加し、同時に画像を変更します。

2 番目の方法: argument.callee.em ^= 1 を使用して配列パラメーターを自動的に選択します

[javascript]


コードをコピーします

コードは次のとおりです: functionchangeimg() { //画像を変更します

var image = ['images/up.png ', 'images/down.png']

var imgupdown =document.getElementById("hideimg");
imgupdown.src = image[arguments.callee.em^= 1];一番下の div
var content =$(".hidecontent");
//表示属性に基づいて実行する操作を決定します
if (content.css("display")!= "none ") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//画像を変更
var image = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src; =images[arguments.callee.em^= 1];
//以下の div を非表示にします
var content =$(".hidecontent");
// に基づいて実行する操作を決定します。表示属性
if (content .css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow") ); ;
}
}


ここでは、画像アドレスを配列に配置し、XOR 演算を実行して、配列パラメータを自動的に選択して画像を切り替えます。
コンテンツの非表示と表示には、.css 属性が使用されます。
以下はレンダリングです: (追加予定)