jQuery ändern ausgewählten Artikelstil auf andere Auswahl

Question

Ich arbeite an einem Projekt, wo ich den Anzeigestil eines Artikels ändern muss, wenn ein anderes Element in der gleichen Zeile ausgewählt ist. Ich muss auch ein Overlay auf allen anderen Elementen außer dem ausgewählten Element sichtbar machen.

Im Moment habe ich Arbeitscode, der das ausgewählte Element hervorhebt und das Overlay erscheinen lässt, aber mein Mangel an Erfahrung verursacht mir Verwirrung darüber, wie dies funktioniert, wie oben erwähnt. Hier ist der Code für die Referenz.

$(".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>

Jede Hilfe sehr geschätzt wird.

Answer 1

Es stellte sich heraus, dass ich dies in Bezug auf meine Markup und meine jQuery in die falsche Richtung ging. Das größte Problem war die img Elemente wurden unnötig tief verschachtelt, und die a Elemente waren völlig unnötig. Wenn auf ein Element geklickt wird, wird ein Modal angezeigt. Wenn der Benutzer auf eine Schaltfläche mit der Klasse add-item klickt, wird dem angeklickten Bild glow hinzugefügt und blur wird zu den verbleibenden Bildern desselben Karussells hinzugefügt. (Missachtet die Xajax-Aufrufe in der jQuery, erinnerte ich mich an diesen Post, nachdem ich in dem Projekt dahin gezogen hatte, es dynamischer zu machen).

Der korrekte Code ist unten.

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 = ""; 
}); 

Wenn Sie irgendwelche anderen Probleme mit meinem Code unten sehen, bitte kommentieren fühlen sich frei zu! Ich bin ständig bestrebt, mich zu verbessern!