하나 이상의 이미지로 동적으로로드되는 div가 있습니다. 처음에는 이러한 모든 이미지가 자르기입니다. 목표는 사용자가 잘린 이미지를 클릭하면 src가 전체 크기 버전으로 대체되는 것입니다. 잘린 이미지로 돌아가려면 전체 크기 버전을 클릭하십시오. 나는 이미지의 파일 이름을 알지 못합니다. 전체 버전은 파일 이름의 첫 번째 문자로 "L"이있는 것을 제외하고는 모두 숫자라는 점만 다릅니다.
이 코드는 작동하지만 더 간단한 방법이 있어야합니다.
$('#class').on('click', '> img', function() {
var src = $(this).attr('src');
var test_src = src.match(/L/g);
var img_id = src.replace(/L/g, '');
var big_img = src.replace('/images/', '/images/L');
if (test_src == undefined) {
$(this).attr('src', big_img)
} else {
$(this).attr('src', img_id);
}
});
이 코드로만 극복 할 수 있었던 문제는 img src를 가져 와서 'L'을 추가하면 첫 번째 클릭 후 img src가 '/images/L123345.jpg'와 같은 것으로 변경되었습니다. , 원래 src ( '/ images / 12345.jpg')로 돌아 가려는 목적으로 다시 클릭하면 두 번째 L이 추가되었습니다.
정말 분명한 것을 놓친 것 같습니다. 제안 해 주셔서 감사합니다.
이미지에 다른 속성을 추가 할 수있는 경우 한 가지 옵션은 기본 이미지 파일 이름을에 저장 id하거나 HTML5를 사용 하는 경우 data-*속성에 저장 하는 것입니다. 다음과 같은 이미지
<img src="/images/1234.jpg" class="class" data-id="1234">
<img src="/images/L5678.jpg" class="class" data-id="5678">
다음 함수는 src현재 값에서 크기를 바꾸는 데 필요한 새 속성 을 빌드 합니다. 먼저 ID를 검색 한 다음 현재 소스에 'L'이 포함되어 lg있으면 빈 문자열 인 변수를 정의하고 그렇지 않으면 'L'과 같은 변수를 정의합니다 . 마지막으로 경로 및 파일 확장자와 함께 두 가지를 함께 연결합니다.
$('.class').on('click', '> img', function() {
var id = $(this).attr('data-id');
var lg = ($(this).attr('src').match(/L/) !== null) ? '' : 'L';
$(this).attr('src', '/images/' + lg + id + '.jpg');
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다