제목 다시 쓰기: 페이지의 특정 값을 강조하는 기술

Question

예를 들어,

제품 그리드에서 20€를 초과하는 가격을 빨간색으로 강조 표시하려면 어떻게 코딩해야 합니까? 또한 사용자가 오른쪽 카테고리를 선택/선택 취소하더라도 계속 작동하도록 해야 합니다.

이게 자바스크립트인가요?

$('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    b.innerText - a.innerText를 반환합니다.
  }).slice(0, 5).addClass('higherthan20')
});

.higherthan20 {
  색상: 빨간색;
}

Answer 1

추천 웹사이트 사용자가 정의한 범위에 맞는 가격만 표시하고 가격 범위를 벗어나는 가격은 제거하여 가격을 필터링합니다. 요청한 필터는 20보다 큰 항목만 강조 표시합니다. 또한 두 번째 요청:

다른 필터와 관련된 코드를 게시하지 않았기 때문에 답변할 수 없습니다.

게시된 코드는 구문뿐만 아니라 목적에도 실패합니다.

1. jQuery 메소드는 일반 JavaScript 참조를 인식하지 못하며 그 반대도 마찬가지입니다. jQuery 개체에서 순수 JavaScript 메서드를 사용하려면 jQuery 개체를 역참조해야 합니다. jQuery와 JavaScript 메서드를 연결하지 마세요. 질문에 사용된 jQuery 메서드 테이블과 순수 JavaScript 메서드 테이블은 다음과 같습니다.

   • jQuery 메서드
     

     방법	설명
     rreee	jQuery 객체를 반복하고 각 DOM 요소에 대한 함수를 호출합니다
     rreee	jQuery 객체에 지정된 모든 DOM 요소를 새로운 jQuery 객체로 수집
     rreee	jQuery 객체의 각 DOM 요소에 클래스를 추가하세요

   • 순수한 JavaScript 방식
     

     방법	설명
     rreee	주어진 배열의 새 복사본을 오름차순으로 반환합니다
     rreee	주어진 배열에 정의된 요소의 범위를 새 배열로 반환합니다

2. 간단히 말하면, div.mErEH _223RA组成的jQuery对象是通过.each()和.find()创建的代码>.然后，当在所述 jQuery 对象上调用 .sort() 에 의해 주어지면 함수는 다음과 같은 이유로 실패합니다:

   • .sort()은 일반적인 JavaScript 방법이며 jQuery 개체를 인식하지 못합니다
   • .sort() 배열을 처리하지만 jQuery 객체는 처리하지 않습니다

3. 함수가 jQuery를 완전히 삭제하고 div.mErEH _223RA 作为 NodeList，然后转换为数组，.sort() 和 .slice()모두 수집했다면 작동할 것입니다. 안타깝게도 반환된 새 배열은 처음 6개의 DOM 요소가 오름차순으로 구성되어 있어 20개를 초과하는 모든 DOM 요소를 강조 표시할 수도 없습니다.

다음 예에서는 실제 HTML 레이아웃은 중요하지 않습니다. className ".x" 应替换为 ".mErEH _223RA".

자세한 내용이 주석이 달린 예

으아악 으아악 으아악