jQuery在不同的選擇上更改選定的項目樣式

我正在處理一個項目，我需要在同一行中的另一個項目被選中時更改項目的指示樣式。我還需要在除選定項目之外的所有其他項目上顯示疊加層。jQuery在不同的選擇上更改選定的項目樣式

現在我有工作代碼，突出顯示所選項目，並使覆蓋顯示，但我缺乏經驗正在導致我如何使上述工作的混淆。這裏是供參考的代碼。

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

任何幫助將不勝感激。

來源

2016-09-24 TomJ

事實證明，我正在接近這個錯誤的方式在我的標記和我的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 = ""; 
});

如果你看到下面我的代碼的任何其他問題，請隨時發表評論！我一直在努力改善！

來源

2016-09-27 00:24:09 TomJ

jQuery在不同的選擇上更改選定的項目樣式

回答

相關問題