Jquery는 클릭을 통해 사진을 전환하고 표시된 콘텐츠를 숨깁니다(2가지 달성 방법)_jquery

우리 컴퓨터 화면 크기는 고정되어 있는데, 제한된 공간에 어떻게 더 많은 콘텐츠를 넣을 수 있을까요?
사용자가 특정 콘텐츠를 보고 싶을 때는 빠르게 볼 수 있고, 보고 싶지 않을 때는 숨길 수 있도록 충분한 선택권을 주어야 합니다. 그래서 제목에 언급된 질문이 있습니다.

사실 이 질문은 매우 간단합니다. 그래서 제가 이 질문을 여러분과 공유하는 이유는 한편으로는 우리 모두가 서로 소통하고 있고, 다른 한편으로는 다음과 같은 내용을 요약하고 있기 때문입니다. 우리 자신의 학습.

여기서 여러분과 공유할 두 가지 방법이 생각납니다.
말할 만큼 아래 코드를 살펴보겠습니다.

첫 번째는 기존 방식입니다. :
[javascript]

코드 복사 코드는 다음과 같습니다.

$(function(){
var Images = ['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 Images = ['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는 주로 콘텐츠의 특정 부분을 표시할지 여부를 설정)와 동시에 이미지를 변경합니다.

두 번째 방법: Argument.callee.em ^= 1을 사용하여 배열 매개변수 자동 선택
[javascript]

코드 복사 코드는 다음과 같습니다.

functionchangeimg() {

//이미지 변경
var Images = ['images/up.png ', 'images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = 이미지[arguments.callee.em^= 1]
//Hide 하단 div
var content =$(".hidecontent")
//display 속성을 기반으로 수행할 작업 결정
if (content.css("display")!= "none ") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//사진 변경
var Images = ['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 속성이 사용됩니다.
다음은 렌더링입니다: (추가 예정)