jQuery 다른 항목에서 선택한 항목 스타일 변경

Question

동일한 행의 다른 항목을 선택하면 항목의 표시 스타일을 변경해야하는 프로젝트에서 작업하고 있습니다. 또한 선택한 항목을 제외한 다른 모든 항목에 오버레이를 표시해야합니다.

지금 내가 선택한 항목을 강조 표시하고 오버레이가 나타나게하는 작업 코드가 있지만 경험 부족으로 인해 위에서 언급 한 것처럼이 작업을 수행하는 방법이 혼란 스럽습니다. 다음은 참조 용 코드입니다.

$(".prod_link").bind('click', function(){ 
 
    $(this).find("img").addClass('glow'); 
 
    $(this).parent().parent().find(".after").css("display", "block"); 
 
});

.prod_thumb{height: 100px; width: 100px;} 
 
.prod_thumb:hover{ 
 
\t margin: 10px auto; 
 
\t height: 95px; 
 
\t width: 95px; 
 
\t background-color: #cd1041; 
 
\t -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
\t -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
\t box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
\t -webkit-transition: all 0.3s ease-out; 
 
\t -moz-transition: all 0.3s ease-out; 
 
\t -ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */ 
 
\t -o-transition: all 0.3s ease-out; 
 
\t transition: all 0.3s ease-out; 
 
} 
 
.glow { 
 
\t margin: 5px auto; 
 
\t height: 95px; 
 
\t width: 95px; 
 
\t background-color: #cd1041; 
 
\t -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
\t -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
\t box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
 
} 
 
.image-container { position: relative; } 
 
.image-container .after { position: absolute; top: 5px; width: 95px; height: 95px; display: block; background: rgba(255, 255, 255, .6); } 
 
.image-container .after:hover{opacity: 0; transition: 0.3s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-2 image-container"> 
 
    \t <a data-toggle="modal" data-target=".prod_modal" class="prod_link"> 
 
\t \t <img src="img/kitchen/cookware2.jpg" class="img-responsive prod_thumb"/> 
 
\t  <div class="after" style="display: none;"></div> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-2 image-container"> 
 
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link"> 
 
\t  <img src="img/kitchen/cookware3.jpg" class="img-responsive prod_thumb"/> 
 
     <div class="after" style="display: none;"></div> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-2 image-container"> 
 
    \t <a data-toggle="modal" data-target=".prod_modal" class="prod_link"> 
 
\t \t <img src="img/kitchen/cookware4.jpg" class="img-responsive prod_thumb"/> 
 
\t  <div class="after" style="display: none;"></div> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-2 image-container"> \t \t \t \t \t \t \t \t \t 
 
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link"> 
 
\t  <img src="img/kitchen/cookware5.jpg" class="img-responsive prod_thumb"/> 
 
    \t <div class="after" style="display: none;"></div> 
 
\t </a> 
 
    </div> 
 
</div>

은 어떤 도움이 크게 감사합니다.

Answer 1

나는 이것이 내 마크 업과 jQuery의 관점에서 잘못된 방식으로 접근하고 있음이 드러났다. 가장 큰 문제는 불필요하게 깊게 중첩 된 img 요소 였고 a 요소는 완전히 불필요한 요소였습니다. 항목을 클릭하면 모달이 나타납니다. 사용자가 클래스 add-item의 버튼을 클릭하면 클릭 된 이미지에 glow이 추가되고이 동일한 캐 러셀의 나머지 이미지에 추가됩니다. (jQuery에서 xajax 호출을 무시하고 프로젝트를 진행하면서이 게시물을 기억해 냈습니다.)

올바른 코드는 다음과 같습니다.

HTML :

<div class="item active"> 
    <div class="row" id="row-1"> 
     <div class="col-sm-2 col-sm-offset-1 thumb" id="thumb-1" data-pid="1" data-toggle="modal" data-target="#product_modal"> 
      <img src="img/kitchen/dinnerware1.jpg" class="img-responsive prod_thumb"/> 
     </div> 
     <div class="col-sm-2 thumb" id="thumb-2" data-pid="2" data-toggle="modal" data-target=".prod_modal" > 
      <img src="img/kitchen/dinnerware2.jpg" class="img-responsive prod_thumb"/> 
     </div> 
     <div class="col-sm-2 thumb" id="thumb-3" data-pid="3" data-toggle="modal" data-target=".prod_modal" > 
      <img src="img/kitchen/dinnerware3.jpg" class="img-responsive prod_thumb"/> 
     </div> 
     <div class="col-sm-2 thumb" id="thumb-4" data-pid="4" data-toggle="modal" data-target=".prod_modal" > 
      <img src="img/kitchen/dinnerware4.jpg" class="img-responsive prod_thumb"/> 
     </div> 
     <div class="col-sm-2 thumb" id="thumb-5" data-pid="5" data-toggle="modal" data-target=".prod_modal" > 
      <img src="img/kitchen/dinnerware5.jpg" class="img-responsive prod_thumb"/> 
     </div> 
    </div> 
</div> 

CSS :

.blur{ 
    width: 100px; height: 100px; 
    filter: url(../img/blur.svg#blur); /* Firefox fix */ 
    -webkit-filter: blur(2px); 
    filter: blur(2px); 
    filter:progid:DXImageTranform.Microsoft.Blur(PixelRadius='3'); /* IE compatibility fix */ 
} 

.blur:hover{ 
    -webkit-filter: blur(0px); 
    filter: blur(0px); 
    filter: none; 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); /* IE compatibility fix */ 
} 

jQuery를 : 당신이 아래에있는 내 코드에 다른 문제가 나타나면

// add to cart btn on products 
$(".add-item").bind('click', function(){ 
    $("div[id^='thumb-']").find('img').removeClass('glow').addClass('blur'); // remove glow from previous selection, add blur to all 
    $('#thumb-' + sid).find('img').addClass('glow').removeClass('blur'); // add glow to current selection, remove blur 

    var rowid = clid.split('-')[1]; // get the row number from clid 
    $("#chkbox-"+ rowid).attr("src","img/checkedbox.png"); // swap empty_chkbox.png fro checkedbox.png 

    // xajax_addToCart($(this).attr('data-pid'), $(this).attr('data-obj')); 
}); 

$(".thumb").bind('click', function(e){ 
    sid = $(this).attr("data-pid"); // assign sid (selected id) 
    clid = $(this).parent().attr('id'); // assign clid (checklist id) 

    $("#product_modal").attr("data-pid", sid); 

    xajax_view($(this).attr("data-pid")); // get information to populate modal 
    e.preventDefault(); 
}); 

$("#product_modal").on("hidden.bs.modal", function(){ 
    // clear out selected id and checklist id 
    sid = 0; 
    clid = ""; 
}); 

는 의견을 주시기 바랍니다! 나는 끊임없이 개선하기 위해 노력하고 있습니다!