jQuery를 사용하여 "name"을 기반으로 div의 배경 이미지를 설정하십시오.

기본적으로 15 개가 넘는 포트폴리오 사이트를 가지고 있습니다. 모든 CSS 마크 업을 수동으로 수행하지 않고 미리보기 div의 배경을 설정하기 위해 현재 조각을 보여주기 위해 (예 : min을 슬라이드) "이름"선택기를 사용할 수 있기를 원합니다. 설명하기가 혼란 스러울 수도 있습니다. 작동하지 않는 코드가 도움이 될 수도 있습니다. "allieslink"클래스는 CSS에서 이것을 가지고 지금 현재로jQuery를 사용하여 "name"을 기반으로 div의 배경 이미지를 설정하십시오.

<a name="allies" class="portbox port-link allieslink"> 
    <div class="port-info"> 
     <h3>Creative Allies</h3> 
     <p class="port-label">Product</p> 
     <p class="port-detail">Print Design</p> 
     <p class="port-label">Year</p> 
     <p class="port-detail">2010</p> 
    </div> 
</a>

다음은 실제 썸네일 HTML의

.allieslink { 
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat; 
}

그래서 내가하고 싶은 것을 꺼내입니다 수동 CSS - "이름"설정을 기반으로 jQuery를 계산 한 다음 CSS와 동일한 이름 선택기 ("-link.jpg"가 추가됨)를 연결하십시오. 분명히

var artname= $(".port-link").name; 
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

이 작동하지 않습니다 :

여기 (문서 준비 함수 내에서) 내 현재 jQuery 코드입니다. 나는 내가 올바른 길을 가고 있다고 느낄 때 왜 그곳에 무언가 바보가 될지 확실하지 않습니다. 정확한 jQuery를 찾아서 올바르게 작동 시키려고합니다. 도움?

는 (지금 현재, 모든 요소에 대한 CSS에서 클래스를 가지고 있지만, 당신은 포트폴리오가 성장함에 따라,이 상당히 길어질 것이라고 상상할 수 있습니다.)

출처

2012-06-25 kyle_conrad

'var에 artname = $ (". 포트 링크").attr ('name')' – Ohgodwhy

약 5 개의 답변을 얻게 될 것이고, 대부분은 같을 것입니다.)))하지만 실제로는 오해입니다. DOM 객체가 jQuery로 래핑 될 때 그 속성 (id, name)은'attributes'에도 래핑됩니다. 따라서 기본 DOM 요소 ('.get (0)')를 사용하거나'.attr()'메서드를 사용하여 작업하십시오. – raina77ow

Btw, 나는 뭔가를 놓쳤습니까? 실제로 블록 요소를'a'로 감싸는 것이 좋습니다. – raina77ow

var artname= $(".port-link").attr("name") 시도 name의 값은 사용 속성

var artname= $(".port-link").attr('name');

또는

var artname= $(".port-link")[0].name;

이 방법으로 name 값을 검색 할 수 있습니다. 그러나 이것이 당신의 문제를 완전히 해결하지는 못할 것입니다. 이 경우 링크를 반복하고 각각의 배경을 설정해야합니다. .each()을 사용하여이 작업을 수행하거나 더 나은 방법을 사용하면 .css() 메서드의 암시 적 루핑을 활용할 수 있습니다.

$(".port-link").css("background",function(){ 
    return "url(IMG/portfolio/" + this.name + "-link.jpg) center top no-repeat"; 
});

그리고 당신이 원하는 경우 배경이 당신이 할 수있는 호버에 center bottom 위치 할 다음과 같이 jQuery를 사용하여 해당.

$(".port-link").hover(function(){ 
    // hover in set background position for hover 
    $(this).css('background-position','center bottom'); 
},function(){ 
    // hover out reset background position 
    $(this).css('background-position','center top'); 
});

그리고 호버 css를 제거하십시오.

출처

2012-06-25 13:58:50

완벽! 마지막 코드는 완벽하게 작동합니다. 정말 고마워. –

@kyle_conrad, 대단히 환영합니다. –

사실 - 배경 이미지 설정에 완벽하게 작동하지만 이제 호버 상태가 올바르게 배치되지 않습니다. CSS에있는 "센터 하단"과 반대로 백그라운드 위치를 "0 % 0 %"로 설정하는 것입니다. 즉, .port-link : hover, .port-link.hover { background-position : 중앙 바닥; 이 같은 } 시도 뭔가 : \t $ ("포트 link.hover.") CSS ("배경 위치", 기능() { \t \t 반환 "중앙 하단 노 반복"; \t \t. }); 하지만 부에노는 없습니다. 생각? –

가를 검색하려면

출처

2012-06-25 13:58:37 Rodolfo

Joy 대답과 동일하지만 ** 첫 번째 ** 일치 요소에서 이름을 가져옵니다. – poncha

이 시도 :이 아닌 일부 필드 이름은 속성 이름을 얻으려면 일치하는 모든 요소를 통해

$(".port-link").each(function() { 
    $(this).css('background', 'url(IMG/portfolio/' + $(this).attr("name"); + '-link.jpg) center top no-repeat'); 
});

이 반복을하고 각자가 적절한 이름

출처

2012-06-25 13:59:46 poncha

사용을위한 적절 배경을 적용 아마 나던 존재합니다

var artname= $(".port-link").attr('name');

출처

2012-06-25 14:01:16 jakee

jQuery를 사용하여 "name"을 기반으로 div의 배경 이미지를 설정하십시오.

답변

관련 문제