[jquery] 특정 글자 포함된 리스트 버튼 처리

nammm·2023년 5월 2일
0

Javascript

목록 보기
5/5
  • 상품 리스트에서 바로 카트 담기 버튼이 가능하도록 기능 추가
  • 품절상품인 경우엔 버튼을 따로 처리할 필요가 있어서 contains를 활용하여 가격 부분이 sold out표기인 경우만 숨김처리
<ul class="prdList column">
<li id="anchorBoxId_256" class="item xans-record-">
      <div class="box boxlink soldout">
          <span class="icon"><img src="/web/upload/icon_202205161528508800.jpg" class="icon_img" alt="품절">       </span>
          <span class="chk"><input type="checkbox" class="ProductCompareClass xECPCNO_256 displaynone"></span>
          <a href="/skin-skin73/product/detail.html?product_no=256&amp;cate_no=81&amp;display_group=1" name="anchorBoxName_256"><img src="//fourco.cafe24.com/web/product/medium/202211/f9eb0e63b3cf22e47ec459c05b2f978f.jpg" id="eListPrdImage256_1" alt="" class="thumb"></a>
          <p class="name"><a href="/skin-skin73/product/detail.html?product_no=256&amp;cate_no=81&amp;display_group=1" class=""><span style="font-size:14px;color:#000000;">프라그란트 키트 - Seonglib<br> <strong>아비브 키트</strong></span></a></p>

        <ul class="xans-element- xans-product xans-product-listitem spec">
            <li class=" xans-record-">
              <strong class="title displaynone">
                <span style="font-size:14px;color:#000000;font-weight:bold;">영문상품명</span> :
              </strong> 
              <span style="font-size:14px;color:#000000;font-weight:bold;">아비브 키트</span>
            </li>
            <li class=" xans-record-">
                <strong class="title displaynone"
                        <span style="font-size:14px;color:#999999;">상품간략설명</span> :
                </strong> 
                <span style="font-size:14px;color:#999999;">50ml / type G</span>
            </li>
            <li class=" xans-record-">
                <strong class="title displaynone"><span style="font-size:14px;color:#000000;">판매가</span> :
                </strong> 
                <span style="font-size:14px;color:#000000;">SOLD OUT</span>
            </li>
        </ul>
      </div>
      <!-- 장바구니 담기 추가 -->
      <div class="cart-wrap" style="display: none;">
          <span class="btn cart-btn">카트에 담기</span>
      </div>
      <!-- //장바구니 담기 추가 -->
    </li>
</ul>

// 품절상품 카트 담기 숨김

cartBtnDisabled() //실행 함수

function cartBtnDisabled() {
    let listItem = $('.xans-product-listnormal li');
    let mainItem = $('.xans-product-listmain li');

    // string "sold out"이 포함되면 클래스 추가
    $('.xans-product-listnormal li .price:contains("SOLD OUT")').parents('li').addClass('soldout');
    $('.xans-product-listmain li .price:contains("SOLD OUT")').parents('li').addClass('soldout');

    $('.xans-product-listnormal li.soldout').each(function () {
        if ($(listItem).hasClass('soldout') === true) {
            $(this).find('.cart-wrap').css('display', 'none');
        }
    })

    $('.xans-product-listmain li.soldout').each(function () {
        if ($(mainItem).hasClass('soldout') === true) {
            $(this).find('.cart-wrap').css('display', 'none');
        }
    })
}
profile
퍼블리셔입니다.

0개의 댓글