jQuery- 모든 것을 숨기고/이 div 이미지를 더 일반적인 표시

StackOverflow https://stackoverflow.com/questions/353772

  •  20-08-2019
  •  | 
  •  

문제

다음 jQuery 코드가 있습니다.

기본적으로 나는 여러 개의 중첩 된 div와 겹친 div의 오른쪽에 링크 목록이 있습니다. 링크 위로 호버링 할 때 링크가 할당 된 Div가 사라집니다.

다음과 같은 코드가 있으며 작동하지만 (기본 Windows의 샘플 사진을 사용합니다) 누군가가 최적화하거나 일반화하는 방법을 생각할 수 있다면 감사합니다.

<html>


<script type="text/javascript">
   $(document).ready(function() {

      $("#trigger1").mouseover(function() {

        $(".contentdiv").addClass("inactive");
        $("#divsunset").removeClass("inactive");
        $(".inactive").fadeOut(500);
        $("#divsunset").fadeIn(500);
      });


      $("#trigger2").mouseover(function() {

        $(".contentdiv").addClass("inactive");
        $("#divwinter").removeClass("inactive");
        $(".inactive").fadeOut(500);
        $("#divwinter").fadeIn(500);

      });

      $("#trigger3").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#divbh").removeClass("inactive");
                $(".inactive").fadeOut(500);
                $("#divbh").fadeIn(500);

      });

      $("#trigger4").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#divwl").removeClass("inactive");
                $(".inactive").fadeOut(500);
                $("#divwl").fadeIn(500);

      });

    });

</script>


<style>
    #divsunset
    {
        position: absolute;
        top: 5px;
        left: 5px;
    }
    #divwinter
            {
                position: absolute;
                top: 5px;
                left: 5px;
    }
    #divbh
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #divwl
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #links
                    {
                        position: absolute;
                        top: 800px;
                        left: 700px;
    }
    .inactive
    {
    }
</style>


Show Sunset Show Winter Show Blue Hills Show Waterlillies

감사합니다 Matt, TM 및 Kron, 귀하의 답변이 정말 도움이되었습니다.

나는 내가 완전히 설명했다고 생각하지 않지만 TM은 내가 찾고 있던 대답을 제공했다.

나는 건조하고 싶었고 TM이 제공 한 코드는 이번에는 마크 업, jQuery 코드를 변경할 필요가 없기 때문에 가장 도움이되었습니다.

다시, 감사합니다. 내가 얼마나 빨리 답을 얻었는지 놀랍습니다. 앞으로도 힘써주세요.

도움이 되었습니까?

해결책

가장 먼저 할 수있는 일은 깨끗하게 만들기 위해 유사한 전화를보다 일반적인 것으로 바꾸는 것입니다.

(참고 :이 모든 것이 내부에 있다고 가정합니다. document.ready())

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

쉼표로 변형 된 선택기를 사용하는 것은 jQuery로 건조에 순종하는 좋은 방법입니다.

나는 사용한다 $(element).data() 요소에 대한 일부 데이터를 설정하고 검색하려면이 경우 선택기는 적절한 요소를 업데이트하는 데 사용되었습니다.

또한 더 깨끗한 시각적 모양을 위해서만 $(document).ready(), 당신이 그것을 선호한다면. 그것은 똑같은 것입니다. 단지 다른 구문입니다.

$(function() {
   //DOM ready
};

다른 팁

나는 몇 달 전에 비슷한 질문에 대답했다 jQuery 스와핑 요소 그것이 도움이된다면.

매트

clillification, 내가 {id : '1'}가있는 곳에 당신은 당신이 보여주고 싶은 div의 ID를 교체하고 다른 div에서 일반 클래스 이름을 만들어 숨겨야합니다.

Mulitple 클래스를 요소에 적용 할 수 있음을 기억하십시오.

<Div class="name1 name2"></div>

원래 DIV에 스타일 규칙이 첨부 된 경우 도움이 될 수 있습니다.

좋지만 할당 한 ID에 대한보다 일반적인 접근 방식이 필요합니다.

가장 빠른 해결책은 부모의 div "#wrapped"아래에 사라지는 겹친 div를 마무리하는 것입니다. 모든 링크를 가져 와서 CSS 클래스 '트리거 이름'을 할당하는 '이름'이 '일몰', '겨울'등을 할당하십시오. 그러면 다음과 같은 것을 할 수 있습니다.


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

가능한 최고의 솔루션은 아니지만 아이디어를 제공하기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top