[jquery] jQuery로 DIV 배경 이미지 전환

내가 일하는 회사의 확장 / 축소 통화 요금표를 만들고 있습니다. 현재 확장 할 수있는 버튼이있는 테이블이 있는데 버튼에 “확장”이라고 표시되어 있습니다. 버튼을 클릭 할 때 “Collapse”로 변경 한 다음 다시 클릭하면 “Expand”로 돌아가는 버튼을 제외하고는 기능적입니다. 버튼의 글은 배경 이미지입니다.

따라서 기본적으로 필요한 것은 div를 클릭 할 때 div의 배경 이미지를 변경하는 것입니다.

답변

$('#divID').css("background-image", "url(/myimage.jpg)");

트릭을 수행하려면 요소의 클릭 이벤트에 연결하십시오.

$('#divID').click(function()
{
  // do my image switching logic here.
});

답변

개인적으로 JavaScript 코드를 사용하여 두 클래스 사이를 전환하려고합니다.

CSS에서 div에 필요한 모든 것을 배경 규칙으로 요약 한 다음 올바른 배경 이미지 (또는 스프라이트를 사용하는 경우 배경 위치)가있는 규칙으로 두 개의 클래스 (예 : 확장 및 축소)를 추가하십시오.

다른 이미지를 가진 CSS

.div {
    /* button size etc properties */
}

.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

또는 이미지 스프라이트가있는 CSS

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

그때…

이미지가 포함 된 JavaScript 코드

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

스프라이트가있는 JavaScript

참고 : 우아한 toggleClass는 Internet Explorer 6에서 작동하지 않지만 이 상황에서도 아래 addClass/ removeClass메소드가 제대로 작동합니다.

가장 우아한 솔루션 (안타깝게도 Internet Explorer 6과 호환되지 않음)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else
            {
                $(this).addClass('expanded');
            }
        });
    }

내가 아는 한이 방법은 브라우저에서 작동하며 스크립트의 URL 변경보다 CSS와 클래스를 사용하는 것이 훨씬 편안합니다.

답변

jQuery를 사용하여 배경 이미지 CSS를 변경하는 방법에는 두 가지가 있습니다.

$('selector').css('backgroundImage','url(images/example.jpg)');
$('selector').css({'background-image':'url(images/example.jpg)'});

차이점을주의해서 살펴보십시오. 두 번째로 일반적인 CSS와 문자열 여러 CSS 속성을 함께 사용할 수 있습니다.

답변

배경 이미지에 CSS 스프라이트를 사용하는 경우 확장 또는 축소 여부에 따라 배경 오프셋 +/- n 픽셀을 충돌시킬 수 있습니다. 토글은 아니지만 배경 이미지 URL을 전환하는 것보다 더 가깝습니다.

답변

내가하는 방법은 다음과 같습니다.

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

답변

이를 수행하는 한 가지 방법은 SPAN 또는 DIV 내부의 HTML에 두 이미지를 모두 넣는 것입니다. CSS 또는 페이지로드시 JS를 사용하여 기본값을 숨길 수 있습니다. 그런 다음 클릭시 전환 할 수 있습니다. 다음은 왼쪽 / 아래쪽 아이콘을 목록에 넣는 데 사용하는 비슷한 예입니다.

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

답변

이것은 WinXP의 모든 현재 브라우저에서 작동합니다. 기본적으로 현재 backgrond 이미지가 무엇인지 확인하십시오. image1이면 image2를 표시하고, 그렇지 않으면 image1을 표시하십시오.

jsapi 항목은 Google CDN에서 jQuery를로드합니다 (데스크톱에서 기타 파일을 테스트하기가 더 쉽습니다).

대체는 브라우저 간 호환성을위한 것입니다 (예 : URL에 따옴표를 추가하고 Firefox, chrome 및 safari는 따옴표를 제거합니다).

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
            var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

            $('.mydiv').click(function() {
                if ($(this).css('background-image').replace(/"/g, '') == original_image) {
                    $(this).css('background-image', second_image);
                } else {
                    $(this).css('background-image', original_image);
                }

                return false;
            });
          });
        </script>

        <style>
            .mydiv {
                background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>