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が追加され、同じカルーセルの残りの画像にblurが追加されます。 （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 = ""; 
}); 

あなたは以下の私のコードを持つ他の問題が表示された場合、コメントすること自由に感じなさい！私は常に改善するために努力しています！